Je vois un sélecteur comme celui-ci,
.class1 .class2 .class3 {
}Qu'est-ce que cela signifie ?
J'ai utilisé plusieurs sélecteurs de classe sans espace. L'espace signifie "descendant", mais cela n'a pas de sens pour les classes.
Supposons qu'il y ait une page avec le balisage suivant,
<div class="class1">
<div class="class2">
<div class="class3">
Some page element(s).
</div>
</div>
</div>La feuille de style CSS que vous avez fournie styliserait tous les éléments sous class3, qui sont sous class2, qui sont sous class1.
Par exemple, disons qu'il s'agit du stylisme,
.class1 .class2 .class3{
color:red;
}Le texte serait rendu 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;
}Editer : Si, à la place, le balisage était le suivant,
<div class="class1 class2 class3">
Some page element(s).
</div>Il fonctionnerait et rendrait le texte en rouge.
Note : < 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
Si c'est bien le cas, il est impossible de savoir quelles sont les règles applicables car les classes ne sont pas utilisées de manière hiérarchique dans le code HTML.
@ZZ Coder - il est en effet possible de déterminer quelles règles s'appliquent : le navigateur commence à appliquer les règles du parent et les remplace par les règles de l'enfant si elles diffèrent.
@Amit G : dans votre code, puis-je savoir où se trouvent les deux balises </div> supplémentaires . Je viens de demander merci
Les autres réponses vous fournissent les explications dont vous avez besoin ; j'ajouterai un cas d'utilisation pratique, juste pour nourrir la curiosité de chacun.
Un cas d'utilisation courant de sélecteurs de classes multiples séparés par des combinateurs descendants est celui d'un site dont la classe de corps est différente pour certaines pages ou certains appareils.
Prenons l'exemple d'un site web simple. Outre l'en-tête et le pied de page, il comporte 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 pourrait être d'organiser #content entre les .sidebar à l'aide d'une astuce flottante que je n'évoquerai pas ici.
Sur un appareil mobile, outre le redimensionnement de l'ensemble en fonction de la faible résolution, le concepteur souhaite peut-être supprimer les barres latérales pour récupérer de l'espace horizontal sur l'écran. Outre les requêtes médiatiques, il existe une option beaucoup plus simple qui consiste à utiliser un code côté serveur pour détecter les navigateurs mobiles et baliser les éléments suivants 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 sur les appareils mobiles :
/* This would appear just beneath the .sidebar { ... } rule */
.mobi .sidebar {
display: none;
}Bien entendu, le même code de détection du navigateur pourrait être utilisé pour masquer complètement la barre latérale, ce qui réduirait la taille de la page et tout le reste, mais il s'agit là encore d'une autre façon d'aborder le problème. Je donne simplement un exemple pratique rapide de la manière dont les sélecteurs de classes multiples dans une hiérarchie peuvent être utilisés en CSS.
div{
padding: 5px;
border: 1px solid #f00
}
.class1 .class2 .class3 {
background-color: #000;
}modifiera l'arrière-plan de la div la plus intérieure :
<div class="class1">
<div class="class2">
<div class="class3">
</div>
</div>
</div>En d'autres termes, il s'agit d'appliquer un style pour class3 qui est un enfant de class2 qui est un enfant de class1 .
Si vous supprimez 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>
Il doit s'agir d'un enfant, allez-y, essayez. Pour obtenir les 3 comportements de classe, vous devez utiliser .class1.class2.class3 construction, sans espace.
@negative et si vous voulez donner une valeur unique pour la classe 1, la classe 2 ou la classe 3 ???
Si l'on veut donner la même couleur de fond à toutes les divs, pourquoi ne pas utiliser la métonymie pour la div parente ?
@gov Ce que montre @01001111 est un exemple de cas où il y aurait une bonne raison d'utiliser la hiérarchie du document pour sélectionner la même classe et fournir des styles différents. (Bien entendu, personne n'aurait l'outrecuidance de nommer leurs classes CSS en fonction du style recherché en réalité).
Pour correspondre à un sous-ensemble de valeurs de "classe", chaque valeur doit être précédée d'un ".", dans n'importe quel ordre.
Exemple(s) :
Par exemple, la règle suivante correspond à tout élément P dont la "classe" s'est vu attribuer une liste de séparées par des espaces, qui comprend "pastoral" et "marine" :
p.pastoral.marine { color : green }
Cette règle s'applique lorsque class="pastoral bleu aqua marine" mais ne correspond pas à pour class="pastoral blue".
http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Comme les classes sont utilisées dans le document sans aucune hiérarchie, cette règle de descendance perturbe une partie de la page. J'ai modifié la règle en utilisant l'ID et les types pour identifier la hiérarchie spéciale et cela fonctionne maintenant.