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

Question

Voici un exemple que je ne comprends pas :

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

Il me semble que width: 460px s'applique à toutes les classes susmentionnées. Mais pourquoi certaines classes sont-elles séparées par une virgule ( , ), et d'autres par un simple espace ?

Je suppose que width: 460px ne sera appliquée 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é à la <div class='container_12'> . Cette hypothèse est-elle correcte ?

Answer 1

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 sans être séparés, vous pouvez supposer qu'il s'agit d'une zone à l'intérieur d'une zone. Ainsi, dans l'exemple ci-dessus, ce style ne s'applique qu'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 affectée, alors que la deuxième classe de grille_6 le sera parce qu'elle est contenue dans un conteneur_12.

Une déclaration telle que

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

La règle du gras ne s'appliquerait qu'aux

dans les zones ayant la classe "description" qui se trouvent à l'intérieur d'une zone ayant l'identifiant "admin", par exemple :

<div id="admin">
   <div class="description">
      <p>This is bold</p>
   </div>
</div>

Answer 2

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

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

Donc .container_12 y .grid_6 sont toutes deux des classes, mais la règle width: 460px ne s'appliquera qu'aux éléments qui ont l'attribut .grid_6 qui sont des descendants d'un élément ayant la classe .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>

Answer 3

Les combinaisons de sélecteurs ont des significations différentes - l'image ci-jointe l'explique facilement.

a) Plusieurs sélecteurs séparés par une virgule ( , ) - Les mêmes styles sont appliqués à tous les éléments sélectionnés.

div,.elmnt-color {
  border: 1px solid red;
}

Ici, le style de la bordure est appliqué à DIV et la classe CSS .elmnt-color les éléments appliqués.

<!-- comma example -->
<div>
  Red border applied
</div>
<p class="elmnt-color">
  Red border applied
</p>

b) Sélecteurs multiples séparés par un espace - Ces sélecteurs sont appelés sélecteurs descendants.

div .elmnt-color {
  background-color: red;
}

Ici, le style de la bordure est appliqué à la classe CSS .elmnt-color les éléments appliqués qui sont enfant éléments d'un DIV élément.

<!-- space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border applied
  </p>
</div>

c) Sélecteurs multiples spécifiés sans espace - Ici, les styles sont appliqués aux éléments qui répondent à toutes les combinaisons.

div.elmnt-color {
  border: 1px solid red;
}

Ici, le style de bordure n'est appliqué qu'à DIV avec une classe CSS de .elmnt-color .

<!-- no space example -->
<div>
  Red border NOT applied
</div>
<p class="elmnt-color">
  Red border NOT applied
</p>
<div>
  Red border NOT applied    
  <p class="elmnt-color">
    Red border NOT applied
  </p>
</div>
<div class="elmnt-color">
  Red border applied
</div>

Les détails sont joints à l'adresse suivante https://www.csssolid.com/css-tips.html

Remarque : la classe CSS n'est qu'un des sélecteurs CSS. Ces règles s'appliquent aux tous Sélecteurs CSS (ex : Class, Element, ID etc.).

Answer 4

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

width:460px ne sera appliquée qu'aux .grid_6 y .grid_8

Edit : Voici un très bon article pour vous

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