HTML & CSS

Spécificité CSS


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 :

Exemple 1

Dans cet exemple, nous avons utilisé l’élément « p » comme sélecteur et spécifié une couleur rouge pour cet élément. Le texte sera rouge :

p {couleur : rouge ;}

Bonjour le monde !


Essayez-le vous-même »

Maintenant, regardez l’exemple 2 :

Exemple 2

Dans cet exemple, nous avons ajouté un sélecteur de classe (nommé « test »), et spécifié une couleur verte pour cette classe. Le texte sera maintenant vert (même si nous avons spécifié une couleur rouge pour le sélecteur d’élément « p »). C’est parce que le sélecteur de classe a une priorité plus élevée :

.test {couleur : vert ;}

p {couleur : rouge ;}

Bonjour le monde !


Essayez-le vous-même »

Maintenant, regardez l’exemple 3 :

Exemple 3

Dans cet exemple, nous avons ajouté le sélecteur d’identifiant (nommé « demo »). Le texte sera désormais bleu, car le sélecteur d’identifiant est prioritaire :

#démo {couleur : bleu ;}

.test {couleur : vert ;}
p {couleur : rouge ;}

Bonjour le monde !


Essayez-le vous-même »

Maintenant, regardez l’exemple 4 :

Exemple 4

Dans cet exemple, nous avons ajouté un style en ligne pour l’élément « p ». Le texte sera désormais rose, car le style en ligne a la plus haute priorité :

#démo {couleur : bleu ;}

.test {couleur : vert ;}
p {couleur : rouge ;}

Bonjour tout le monde !


Essayez-le vous-même »


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.

Note: Le style en ligne obtient une valeur de spécificité de 1000 et a toujours la priorité la plus élevée !

Note 2: Il existe une exception à cette règle : si vous utilisez le !important
règle, il remplacera même les styles en ligne !

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

Sélecteur Valeur de spécificité Calcul
p 1 1
p.test 11 1 + 10
p#démo 101 1 + 100

1000 1000
#démo 100 100
.test dix dix
p.test1.test2 21 1 + 10 + 10
#barre de navigation p#démo 201 100 + 1 + 100
* 0 0 (le sélecteur universel est ignoré)

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

Considérez ces trois fragments de code :

Exemple

R : h1
B : h1#contenu
C :

Titre

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 :

Exemple

div#a {couleur de fond : vert ;}
#a {couleur de fond : jaune ;}
div[id=a] {couleur de fond : bleu ;}

Essayez-le vous-même »

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

Exemple

À partir d’un fichier CSS externe :
#content h1 {couleur de fond : rouge ;}

Dans le fichier HTML :

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

– Le sélecteur universelet les valeurs héritées sont ignorées !

#Spécificité #CSS

Articles similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Bouton retour en haut de la page