web-dev-qa-db-fra.com

Plusieurs classes dans CSS Selector

Je vois un sélecteur comme ça,

.class1 .class2 .class3 {
}

Qu'est-ce que ça veut dire?

J'ai utilisé plusieurs sélecteurs de classe sans espaces. L'espace signifie descendant mais cela n'a pas de sens pour les classes.

csscss-selectors
50
ZZ Coder

Disons qu'il y a une page avec le balisage suivant,

<div class="class1">
  <div class="class2">
    <div class="class3">
      Some page element(s).
    </div>
  </div>
</div>

Le CSS que vous avez fourni styliserait tous les éléments sous class3, qui sont sous class2, qui sont sous class1.

c'est-à-dire disons que c'était le style,

.class1 .class2 .class3{
  color:red;
}

Cela rendrait le texte en rouge, ce qui équivaut à ce qui suit,

div.class1 div.class2 div.class3 {
  color:red;
}

Enfin, ce qui suit ne ferait rien,

.class1.class2.class3{
  color:red;
}

Modifier: Si le balisage était le suivant,

<div class="class1 class2 class3">
      Some page element(s).
</div>

Cela fonctionnerait et rendrait le texte en rouge.

Remarque: <IE7 peut avoir des problèmes avec ce qui précède ...

http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-Explorer/http://www.w3.org /TR/2004/CR-CSS21-20040225/selector.html#class-html

72
Amit G

Les autres réponses vous fournissent l'explication dont vous avez besoin; Je vais apporter un cas d'utilisation pratique juste pour nourrir la curiosité de quiconque.

Un cas d'utilisation courant dans le monde réel pour les sélecteurs de classes multiples séparés par des combinateurs descendants est lorsqu'un site a une classe de corps différente pour certaines pages ou certains appareils.

Par exemple, considérez ce balisage d'un simple site Web. Outre l'en-tête et le pied de page, il possède également une colonne de contenu et deux barres latérales:

<!-- DTD, html, head... -->
<body>
    <div id="wrap">
        <div id="header">
          <h1>My Site</h1>
        </div>

        <div id="content">
          <!-- ... -->
        </div>

        <div id="side1" class="sidebar"><!-- ... --></div>
        <div id="side2" class="sidebar"><!-- ... --></div>

        <div id="footer">
          <p>Copyright LOLOLOL</p>
        </div>
    </div>
</body>
</html>

La configuration par défaut peut consister à organiser #content entre le .sidebars, fait avec une supercherie flottante que je n'irai pas ici.

Sur un appareil mobile, en plus de redimensionner le tout pour la petite résolution, le concepteur souhaite peut-être supprimer les barres latérales pour récupérer une partie de l'écran horizontal. Mis à part les requêtes multimédias, il existe également l'option beaucoup plus simple d'utiliser le code côté serveur pour détecter les navigateurs mobiles et étiqueter body avec une classe en conséquence, comme ceci (exemple ASP.NET C #):

<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %>
<body class="mobi">
<% } else { %>
<body>
<% } %>

C'est là que votre exemple est utile. Le concepteur utilise simplement la règle suivante pour masquer les barres latérales des appareils mobiles:

/* This would appear just beneath the .sidebar { ... } rule */

.mobi .sidebar {
    display: none;
}

Bien sûr, le même code de détection du navigateur pourrait être utilisé pour masquer le balisage de la barre latérale, rasant la taille de la page et tout ce jazz, mais encore une fois, ce n'est qu'une autre façon d'aborder cela. Je donne juste un rapide exemple pratique de la façon dont plusieurs sélecteurs de classe dans une hiérarchie peuvent être utilisés en CSS.

8
BoltClock
div{
    padding: 5px;
    border: 1px solid #f00
}
.class1 .class2 .class3 {
   background-color: #000;
}

changera l'arrière-plan de la div la plus intérieure:

<div class="class1">
  <div class="class2">
     <div class="class3">
     </div>
  </div>
</div>

http://jsfiddle.net/C7QZM/

En d'autres termes, cela signifie appliquer un style pour class3 qui est un enfant de class2 qui est un enfant de class1.

Si vous ignorez les espaces, votre règle de style s'appliquera aux éléments suivants:

.class1.class2.class3{
   background-color: #000;
}
<div class="class1 class2 class3">
</div>

http://jsfiddle.net/C7QZM/1/

4
Maksim Vi.

Cela signifie toujours descendant et cela a du sens pour les classes si vous avez des hiérarchies imbriquées. Par exemple:

.blackOnWhite .title {
    color:black;
}

.whiteOnWhite .title {
    color:white;
}
3
01001111

Pour faire correspondre un sous-ensemble de valeurs de "classe", chaque valeur doit être précédée d'un ".", Dans n'importe quel ordre.

Exemples):

Par exemple, la règle suivante correspond à tout élément P dont l'attribut "class" a reçu une liste de valeurs séparées par des espaces qui inclut "pastoral" et "marine":

p.pastoral.marine {couleur: vert}

Cette règle correspond lorsque class = "pastoral blue aqua marine" mais ne correspond pas à class = "pastoral blue".

http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html

0
pierrotlefou