Qu’est-ce que la spécificité ?

S’il y a deux règles CSS ou plus qui pointent vers le même élément, le sélecteur avec la valeur de spécificité la plus élevée “gagnera” et sa déclaration de style sera appliquée à cet élément HTML.

Considérez la spécificité comme un score/rang qui détermine quelle déclaration de style est finalement appliquée à un élément.

Regardez les exemples suivants :

Maintenant, regardez l’exemple 2 :

Maintenant, regardez l’exemple 3 :

Maintenant, regardez l’exemple 4 :

Hiérarchie de spécificité

Chaque sélecteur CSS a sa place dans la hiérarchie des spécificités.

Quatre catégories définissent le niveau de spécificité d’un sélecteur :

1. Styles en ligne – Exemple :
   

2. identifiants – Exemple : #barre de navigation
3. Classes, pseudo-classes, sélecteurs d’attributs – Exemple : .test, :hover, [href]
4. Eléments et pseudo-éléments – Exemple : h1, ::before

Comment calculer la spécificité ?

Mémorisez comment calculer la spécificité !

Commencez à 0, ajoutez 100 pour chaque valeur d’ID, ajoutez 10 pour chaque valeur de classe (ou pseudo-classe ou sélecteur d’attribut), ajoutez 1 pour chaque sélecteur d’élément ou pseudo-élément.

Le tableau ci-dessous montre quelques exemples sur la façon de calculer les valeurs de spécificité :

Le sélecteur avec la valeur de spécificité la plus élevée gagnera et prendra effet !

Considérez ces trois fragments de code :

La spécificité de A est 1 (sélecteur à un élément)
La spécificité de B est 101 (une référence ID + un sélecteur d’élément)
La spécificité de C est de 1000 (style en ligne)

Puisque la troisième règle (C) a la valeur de spécificité la plus élevée (1000), cette déclaration de style sera appliquée.

Plus d’exemples de règles de spécificité

Même spécificité : la dernière règle l’emporte – Si la même règle est écrite deux fois dans la feuille de style externe, alors la dernière règle l’emporte :

Les sélecteurs d’ID ont une spécificité plus élevée que les sélecteurs d’attributs
– Regardez les trois lignes de code suivantes :

la première règle est plus spécifique que les deux autres, et sera donc appliquée.

Les sélecteurs contextuels sont plus spécifiques qu’un sélecteur d’élément unique – La feuille de style intégrée est plus proche de l’élément à styliser. Donc dans la situation suivante

cette dernière règle sera appliquée.

Un sélecteur de classe bat n’importe quel nombre de sélecteurs d’éléments – un sélecteur de classe tel que .intro beats h1, p, div, etc :

Le sélecteur universel et les valeurs héritées ont une spécificité de 0