web-dev-qa-db-fra.com

Que signifient les virgules et les espaces dans plusieurs classes en CSS?

Voici un exemple que je ne comprends pas:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Il me semble que width: 460px est appliqué à toutes les classes mentionnées ci-dessus. Mais pourquoi certaines classes sont séparées par une virgule (,), et certains juste par un espace?

Je suppose que width: 460px ne sera appliqué qu'aux éléments qui combinent des classes de la manière mentionnée dans le fichier CSS. Par exemple, il sera appliqué à <div class='container_12 grid_6'> mais il ne sera pas appliqué au <div class='container_12'>. Cette hypothèse est-elle correcte?

csscss-selectors
80
Roman
.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Cela dit "faites tous les .grid_6 dans .container_12 et tous les .grid_8 dans .container_16 460 pixels de large." Ainsi, les deux éléments suivants seront identiques:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

Quant aux virgules, elles appliquent une règle à plusieurs classes, comme ceci.

.blueCheese, .blueBike {
  color:blue;
}

Il est fonctionnellement équivalent à:

.blueCheese { color:blue }
.blueBike { color:blue }

Mais réduit la verbosité.

137
Sampson
.container_12 .grid_6 { ... }

Cette règle correspond à un nœud DOM avec la classe container_12 qui a un descendant (pas nécessairement un enfant) avec la classe grid_6, et applique les règles CSS à l'élément DOM avec la classe grid_6.

.container_12 > .grid_6 { ... }

En mettant > entre eux dit que le grid_6 le nœud doit être un enfant direct du nœud de classe container_12.

.container_12, .grid_6 { ... }

Une virgule, comme d'autres l'ont dit, est un moyen d'appliquer des règles à de nombreux nœuds différents à la fois. Dans ce cas, les règles s'appliquent à tout noeud avec soit une classe de container_12 ou grid_6.

26
Steve Madsen

Pas exactement ce qui a été demandé, mais peut-être que cela aidera.

Pour appliquer un style à un élément uniquement s'il a les deux classes, votre sélecteur ne doit utiliser aucun espace entre les noms de classe.

Par exemple:

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }
<div class='class1 class2'>Bold Red Text</div>
<div class='class1'>Bold Text (not red)</div>
<div class='class1'><div class='class2'>Bold Green Text</div></div>
12
Alan Peabody

virgule regroupe les classes (applique le même style à toutes), n espace vide indique que le sélecteur suivant doit se trouver dans le premier sélecteur.

Par conséquent

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

applique ce style uniquement à la classe .grid_6 qui est dans .container_12 classe et à .grid_8 classe située dans .container_16.

7
Cloudanger

Le width: 460px; sera appliqué à l'élément avec le .grid_8 classe, contenue à l'intérieur les éléments avec .container_16 classe, et les éléments avec .grid_6 classe, contenue à l'intérieur les éléments avec .container_12.

L'espace signifie patrimoine et la virgule signifie "et". Si vous mettez des propriétés avec un sélecteur comme
.class-a, .class-b, vous aurez les propriétés appliquées aux éléments avec n'importe laquelle des deux classes.

J'espère que j'ai aidé.

5
3rgo

Vous avez quatre classes et deux sélecteurs dans votre exemple:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

Alors .container_12 et .grid_6 sont les deux classes, mais la règle width: 460px ne sera appliqué qu'aux éléments qui ont le .grid_6 classe qui sont les descendants d'un élément qui ont le .container_16 classe.

Par exemple:

<div class="container_16">
<p class=".grid_6">This has a width of 480px.</p>
<p>This has an unknown width.</p>
</div>
3
James Sumners

Ce qui précède signifie que vous appliquez des styles à deux classes, indiquées par la virgule.

Lorsque vous voyez deux éléments côte à côte non séparés, vous pouvez supposer qu'il fait référence à une zone à l'intérieur d'une zone. Donc, dans ce qui précède, ce style s'applique uniquement aux classes grid_6 à l'intérieur des classes container_12 et aux classes grid_8 à l'intérieur des classes container_16.

dans l'exemple:

<div class="grid_6">This is not effected</div>
<div class="container_12">
  <div class="grid_6">
    This is effected.
  </div>
</div>

La première grille_6 ne sera pas effectuée tandis que la seconde classe grid_6 le sera car elle est contenue dans un container_12.

Une déclaration comme

#admin .description p { font-weight:bold; }

Appliquerait uniquement les caractères gras à

les balises dans les zones qui ont la classe "description" qui sont à l'intérieur d'une zone avec l'ID "admin", telles que:

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>
3
clumsyfingers
.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460px ne sera appliqué qu'à .grid_6 et .grid_8

Edit: Voici un très bon article pour vous

http://css-tricks.com/multiple-class-id-selectors/

1
Jitendra Vyas