Comment attribuer plusieurs classes à un conteneur HTML? [fermé]

398

Est-il possible d'affecter plusieurs classes à un même HTMLconteneur?

Quelque chose comme:

<article class="column, wrapper">

html class

— ARGO
source

Quel problème avez-vous maintenant? Quoi qu'il en soit, c'était la solution à ce problème. Tout autre problème peut dépendre de plusieurs facteurs.

— Aurelio De Rosa

1

Bien que cela soit faisable, j'utilise généralement des conteneurs imbriqués avec héritage CSS. C'est beaucoup plus joli et généralement plus utile.

— Jonathan Henson

Si vous rencontrez toujours un problème après la suppression de la virgule, je vous suggère de consulter les conseils expliquant pourquoi les règles ne fonctionnent pas . J'ai trouvé que le ralentisseur le plus courant pour moi est la situation décrite ici comme "Utilisation d'un raccourci" (c'est-à-dire qu'il revient implicitement à une valeur par défaut)

— LJ dans NJ

531

Retirez simplement la virgule comme ceci:

<article class="column wrapper">

— Aurelio De Rosa
source

3

— Andre Elrico

1

Wierd son espace au lieu de virgules. Mais ouais merci pour la réponse

— Soham Mehta

188

De la norme

7.5.2 Identificateurs d'élément: les attributs id et class

Définitions des attributs

id = nom [CS]
Cet attribut attribue un nom à un élément. Ce nom doit être unique dans un document.

class = cdata-list [CS]
Cet attribut attribue un nom de classe ou un ensemble de noms de classe à un élément. Un ou plusieurs éléments peuvent se voir attribuer le même nom ou les mêmes noms de classe. Les noms de classe multiples doivent être séparés par des espaces blancs.

Oui, il suffit de mettre un espace entre eux.

<article class="column wrapper">

Bien sûr, il y a beaucoup de choses que vous pouvez faire avec l'héritage CSS. Voici un article pour plus de lecture .

— Jonathan Henson
source

3

Comment doit-on s'attendre à ce qu'un navigateur réagisse si un élément est affecté à plusieurs classes qui définissent des valeurs différentes pour les mêmes attributs. Y a-t-il un ordre de priorité pour cela?

— EternallyCurious

6

@JonathanHenson: non, ce n'est pas le cas. En cas de spécificité liée, la règle qui se produit plus tard dans le CSS l'emporte.

— Ulrich Schwarz

1

@UlrichSchwarz la classe CSS listée plus tard (ce que j'espérais quand j'ai testé cela), ou plus tard dans tous les fichiers CSS? Parce que le premier ne fonctionne certainement pas dans les navigateurs dans lesquels j'ai testé, alors que j'ai testé la dernière hypothèse.

— Jonathan Henson

9

@JonathanHenson: Selon les spécifications CSS 2.1 , "si deux déclarations ont le même poids, la même origine et la même spécificité, cette dernière spécifie les victoires. Les déclarations dans les feuilles de style importées sont considérées comme étant antérieures à toute déclaration dans la feuille de style elle-même." Il s'agit donc d'un ordre de déclaration CSS. Les noms dans l'attribut class n'ont pas d'ordre spécifié, car il .foos'agit du sucre syntaxique pour [class ~= foo] ref , " fooest un mot dans l' classattribut".

— Ulrich Schwarz

1

@UlrichSchwarz Merci pour la clarification.

— Jonathan Henson

18

Pour affecter plusieurs classes à un élément html , incluez les deux noms de classe dans les guillemets de l'attribut class et séparez-les par un espace:

<article class="column wrapper">

Dans l'exemple ci-dessus, columnet wrappersont deux classes css distinctes, et leurs deux propriétés seront appliquées à l' articleélément.

— Webeng
source

16

qu'est-ce que cette réponse diffère de la précédente?

— Iván Rodríguez Torres

-2

vous devez mettre un point entre la classe comme

class = "column.wrapper">

— amit kumar
source