Sélecteurs et cascade

Quand deux règles donnent des couleurs différentes au même élément, CSS ne devine pas. Il compare les sélecteurs, et un id l'emporte sur n'importe quel nombre de classes.

Choisir des éléments

Un sélecteur est un motif qui correspond à des éléments de la page. Les plus simples sélectionnent par nom d'élément, par classe ou par id. p est un sélecteur de type et correspond à tous les paragraphes. .note est un sélecteur de classe et correspond à tous les éléments qui ont class="note" ; un élément peut avoir plusieurs classes séparées par des espaces, et une même classe peut servir sur de nombreux éléments. #intro est un sélecteur d'id et correspond à l'unique élément qui a id="intro". *, le sélecteur universel, correspond à tout.

p { line-height: 1.5; }            /* every p */
.note { background: #fff4d6; }     /* class="note" */
#intro { font-size: 20px; }        /* id="intro" */
h1, h2 { font-weight: 600; }       /* group: h1 and h2 */
nav a { text-decoration: none; }   /* a anywhere inside nav */
ul > li { margin: 4px 0; }         /* li that is a direct child of ul */
a:hover { text-decoration: underline; }
input[type="email"] { width: 20em; }

Combiner des sélecteurs

Une virgule regroupe des sélecteurs qui partagent les mêmes déclarations : h1, h2 met donc en forme les deux. Un espace est le combinateur descendant : nav a correspond aux liens situés n'importe où dans un nav, à n'importe quelle profondeur. > est plus strict et ne correspond qu'aux enfants directs. Écrire deux sélecteurs simples collés, sans espace, comme a.active, signifie qu'un même élément doit correspondre aux deux : un lien qui a aussi la classe active. Les sélecteurs d'attribut, entre crochets, sélectionnent selon un attribut, par exemple input[type="email"].

Les pseudo-classes, écrites avec un seul deux-points, sélectionnent des éléments dans un état ou une position particulière : :hover quand le pointeur est dessus, :focus-visible quand l'élément a le focus clavier, :first-child quand c'est le premier enfant de son parent. Les pseudo-éléments, écrits avec deux deux-points, mettent en forme une partie d'un élément, comme ::first-line ou ::placeholder.

Quand les règles ne sont pas d'accord

Souvent, plusieurs règles définissent la même propriété sur le même élément. La cascade, le C de CSS, décide laquelle l'emporte. En laissant de côté les styles propres au navigateur et !important, deux questions règlent presque tous les cas. D'abord, quel sélecteur est le plus spécifique ? La spécificité se compte avec trois nombres : les id, puis les classes (y compris les sélecteurs d'attribut et les pseudo-classes), puis les noms d'éléments. #menu a vaut 1-0-1, .active vaut 0-1-0 et nav a vaut 0-0-2. Les nombres se comparent en partant de la gauche, donc un seul id l'emporte sur n'importe quel nombre de classes. Ensuite, à spécificité égale, c'est la règle placée le plus loin dans la feuille de style qui gagne.

Les attributs style en ligne l'emportent sur tous les sélecteurs, et une déclaration marquée !important l'emporte sur les déclarations normales. Ce sont deux solutions rapides tentantes, mais elles compliquent la modification suivante, car on ne peut les surpasser qu'en en rajoutant. La plupart des équipes gardent une spécificité faible et homogène, en mettant en forme surtout avec des classes, pour que l'ordre dans le fichier suffise à prévoir le résultat.

L'héritage

Certaines propriétés passent automatiquement du parent à l'enfant. Définis color ou font-family sur body, et chaque paragraphe, liste et cellule de tableau à l'intérieur en hérite, sauf si une règle définit sa propre valeur. Les propriétés liées au texte sont en général héritées ; celles liées à la boîte, comme width, padding, border et margin, ne le sont pas. C'est pour cela qu'une bordure sur une section n'apparaît pas autour de chaque paragraphe qu'elle contient. Le mot-clé inherit force une propriété à copier la valeur de son parent.

Nomme les classes d'après ce qu'est l'élément, pas d'après son apparence. .warning garde son sens quand le designer passe la couleur du rouge à l'orange ; .red-text, non. Les id sont uniques : mieux vaut les réserver aux cibles de liens et aux étiquettes de formulaire plutôt qu'à la mise en forme, ce qui garde une spécificité faible.