Quelle est la difference entre ".class element" et "element.class"?

Question

Existe-t-il une différence entre .class element et element.class dans un sélecteur CSS? On m'avait toujours montré element.class mais l'autre jour, un fichier CSS qui contenait .class element voulait savoir s'il s'agissait simplement d'un choix de style (auquel cas je correspond mes modifications), ou s'il y avait une raison spécifique (dans ce cas je ne voudrais pas nécessairement faire correspondre mes modifications).

Answer 1

element.class sélectionne tous les <element /> s avec cette classe. .class element sélectionne tous les <element /> s qui sont des descendants d'éléments qui ont cette classe.

Par exemple, HTML:

 <div class='wrapper'>
  <div class='content'></div>
  <div></div>
  <div class='footer'></div>
</div>
 

Par exemple, CSS:

 div.wrapper {
  background-color: white; /* the div with wrapper class will be white */
}

.wrapper div {
  background-color: red;   /* all 3 child divs of wrapper will be red */
}
 

Answer 2

"element.class" sélectionne les éléments qui ont la classe donnée.

"Élément .class" sélectionne tous les éléments qui sont les enfants de n'importe quelle classe.

Exemple:

 <div class="foo">
    <p>...</p>
</div>
 

div.foo sélectionnerait la division, tandis que .foo p sélectionnerait le paragraphe enfant. Il convient de noter que, sans spécifier enfant direct via le sélecteur ">", cela parcourra tout l’arborescence du document lors de la recherche d’enfants.