Sélecteurs et cascade

CSS (feuilles de style en cascade) est le langage qui contrôle la présentation visuelle. Vous écrivez des règles — chaque règle possède un sélecteur qui cible des éléments et un bloc de déclaration contenant des paires propriété-valeur.

Les trois sélecteurs fondamentaux : le type cible tous les éléments d’une balise (p), la classe cible les éléments dotés d’une classe (.card), et l’ID cible un élément par son identifiant (#logo). Préférez les classes : les ID ont une spécificité très élevée.

Sélectionnez un élément selon la valeur de son attribut avec [type="email"]. Utilisez les pseudo-classes pour représenter un état : :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.

Les combinateurs décrivent les relations entre les éléments : espace (descendant), > (enfant direct), + (frère adjacent), ~ (frère général).

Lorsque plusieurs règles ciblent le même élément, la spécificité détermine laquelle l’emporte. Les sélecteurs d’ID (0,1,0,0) l’emportent sur les sélecteurs de classe (0,0,1,0), eux-mêmes prioritaires sur les sélecteurs de type (0,0,0,1). Les styles en ligne l’emportent sur tous les autres. !important l’emporte sur tout — utilisez-le uniquement en dernier recours.

Comptez séparément les ID, les classes/attributs/pseudo-classes et les types. Comparez les colonnes une par une. Exemple : #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). Le premier l’emporte.

Lorsque la spécificité est identique, la règle qui apparaît plus tard dans la feuille de style l’emporte. C’est le C de CSS — la cascade. L’ordre des importations et l’ordre d’apparition dans le code source comptent tous les deux.

Certaines propriétés CSS sont héritées par défaut : les enfants reçoivent la valeur du parent sans que vous ayez besoin de la définir. Les propriétés liées au texte, comme color, font-family et line-height, sont héritées. Les propriétés du modèle de boîte, comme margin, ne le sont pas.

:is() et :where() vous permettent d’écrire des sélecteurs concis qui correspondent à n’importe quel élément d’une liste. La différence : :is() hérite de la spécificité la plus élevée de ses arguments ; :where() a toujours une spécificité nulle.

Le sélecteur universel * correspond à chaque élément. Il est couramment utilisé dans les réinitialisations CSS : *, *::before, *::after { box-sizing: border-box; }, ce qui rend le modèle de boîte bien plus prévisible.

Les navigateurs appliquent leur propre feuille de style par défaut (la feuille de style de l’agent utilisateur) avant la vôtre. Les réinitialisations CSS, comme normalize.css, ou les couches CSS neutralisent ces valeurs par défaut afin que votre mise en forme parte d’une base connue.

Quel sélecteur possède la spécificité la plus élevée ?

Ciblez les éléments avec des sélecteurs de type, de classe, d’ID, d’attribut et de pseudo-classe. La spécificité résout les conflits (ID > classes > types). La cascade départage les égalités à l’aide de l’ordre dans le code source. L’héritage propage automatiquement les styles de texte aux descendants.