Spécificité

Podcast CSS – 003: Spécificité

Supposons que vous utilisiez les langages HTML et CSS suivants:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

Il y a deux règles concurrentes. L'une colore le bouton en rouge et l'autre en bleu. Quelle règle est appliquée à l'élément ? Comprendre l'algorithme de la spécification CSS concernant la spécificité est essentiel pour comprendre comment le CSS détermine si des règles sont en concurrence.

La spécificité est l'une des quatre étapes distinctes de la cascade, que nous avons vu dans le dernier module, sur la cascade.

Évaluation de la spécificité

Chaque règle de sélecteur obtient un score. Vous pouvez considérer la spécificité comme un score total et chaque type de sélecteur rapporte des points pour atteindre ce score. Le sélecteur avec le score le plus élevé l'emporte.

Avec de la spécificité dans un projet réel, l'exercice d'équilibre consiste à s'assurer que les règles CSS que vous prévoyez d'appliquer sont effectivement applicables tout en limitant généralement les scores pour éviter toute complexité. Le score ne doit être plus élevé que nécessaire, au lieu de viser le score le plus élevé possible. À l'avenir, il se peut que vous deviez utiliser des CSS vraiment plus importants. Si vous essayez d'obtenir le score le plus élevé, vous allez rendre ce travail difficile.

Évaluer chaque type de sélecteur

Chaque type de sélecteur permet de gagner des points. Vous ajoutez tous ces points pour calculer la spécificité globale d'un sélecteur.

Sélecteur universel

Un sélecteur universel (*) n'a aucune spécificité et n'obtient aucun point. Cela signifie que toute règle comportant un ou plusieurs points l'ignorera.

* {
  color: red;
}

Sélecteur d'élément ou de pseudo-élément

Un élément (type) ou pseudo-élément Le sélecteur obtient 1 point de spécificité .

Sélecteur de type

div {
  color: red;
}

Sélecteur de pseudo-élément

::selection {
  color: red;
}

Sélecteur de classe, pseudo-classe ou d'attribut

Une classe, pseudo-classe ou Le sélecteur d'attribut obtient 10 points de spécificité.

Sélecteur de classe

.my-class {
  color: red;
}

Sélecteur de pseudo-classe

:hover {
  color: red;
}

Sélecteur d'attributs

[href='#'] {
  color: red;
}

:not() la pseudo-classe elle-même n'apporte rien au calcul de la spécificité. Toutefois, les sélecteurs transmis en tant qu'arguments sont ajoutés au calcul de la spécificité.

div:not(.my-class) {
  color: red;
}

Cet échantillon comporte 11 points de spécificité car il comporte un sélecteur de type (div) et une classe à l'intérieur de :not().

Sélecteur d'ID

Un ID obtient 100 points de spécificité, tant que vous utilisez un sélecteur d'ID (#myID) et non un sélecteur d'attribut ([id="myID"]).

#myID {
  color: red;
}

Attribut de style intégré

Code CSS appliqué directement à l'attribut style de l'élément HTML obtient un score de spécificité de 1 000 points. Cela signifie que pour le remplacer dans CSS, vous devez écrire un sélecteur extrêmement spécifique.

<div style="color: red"></div>

Ajout de la règle !important.

Enfin, un !important à la fin d'une valeur CSS obtient un score de spécificité de 10 000 points. Il s'agit de la spécificité la plus élevée qu'un élément individuel peut obtenir.

Une règle !important est appliquée à une propriété CSS, Par conséquent, tous les éléments de la règle globale (sélecteur et propriétés) n'obtiennent pas le même score de spécificité.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Testez vos connaissances

Tester vos connaissances sur l'évaluation de la spécificité

Quel est le score de spécificité de a[href="#"] ?

1
a vaut 1 point, mais [href="#"] vaut 10 points.
5
Essayez encore.
11
a vaut 1 point et [href="#"] vaut 10 points, soit un score total de 11 points.

Spécificité en contexte

La spécificité de chaque sélecteur correspondant à un élément est additionnée. Prenons l'exemple de code HTML suivant:

<a class="my-class another-class" href="#">A link</a>

Ce lien comporte deux classes. Ajoutez le code CSS suivant pour obtenir 1 point de spécificité:

a {
  color: red;
}

Référencer l'une des classes de cette règle Il comporte désormais 11 points de spécificité:

a.my-class {
  color: green;
}

Ajoutez l'autre classe au sélecteur, il présente désormais 21 points de spécificité:

a.my-class.another-class {
  color: rebeccapurple;
}

Ajoutez l'attribut href au sélecteur. il présente désormais 31 points de spécificité:

a.my-class.another-class[href] {
  color: goldenrod;
}

Enfin,ajoutez une pseudo-classe :hover à tout cela, le sélecteur s'obtient avec 41 points de spécificité:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Testez vos connaissances

Tester vos connaissances sur l'évaluation de la spécificité

Lequel de ces sélecteurs vaut 21 points ?

article > section
Un élément vaut 1 point, alors qu'il y en a deux dans le sélecteur, cela vaut 2 points.
article.card.dark
Un élément vaut 1 point, une classe 10 points, et avec deux classes et un élément, ce sélecteur vaut 21 points.
article:hover a[href]
Les éléments valent 1 point, les pseudo-classes et les attributs 10 points, il y a 2 points pour les éléments, et 20 points pour les attributs et les classes, ce qui fait de ce sélecteur 22 points.

Visualiser la spécificité

Dans les diagrammes et les calculateurs de spécificité, la spécificité est souvent visualisée comme ceci:

Schéma illustrant les sélecteurs les plus spécifiques aux moins spécifiques

Le groupe de gauche comprend id sélecteurs. Le second groupe contient des sélecteurs de classe, d'attribut et de pseudo-classe. Le dernier groupe est constitué de sélecteurs d'éléments et de pseudo-éléments.

Pour référence, le sélecteur suivant est 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Testez vos connaissances

Tester vos connaissances en visualisation de la spécificité

Lequel des sélecteurs suivants est 1-2-1 ?

section#specialty.dark
Ce sélecteur se présente sous la forme 1-1-1.
#specialty:hover li.dark
🎉
[data-state-rad].dark#specialty:hover
Ce sélecteur se présente sous la forme 1-3-0.
li#specialty section.dark
Ce sélecteur se présente sous la forme 1-1-2.

Augmentation pragmatique de la spécificité

Imaginons que votre code CSS ressemble à ceci:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

En HTML, qui se présente comme suit:

<button class="my-button" onclick="alert('hello')">Click me</button>

Le bouton a un fond gris, car le deuxième sélecteur gagne 11 points de spécificité (0-1-1). En effet, elle comporte un sélecteur de type (button), ce qui représente 1 point et un sélecteur d'attribut ([onclick]), soit 10 points.

La règle précédente (.my-button) gagne 10 points (0-1-0), car il comporte un sélecteur de classe.

Si vous voulez donner une impulsion à cette règle, répétez le sélecteur de classe comme ceci:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Maintenant, le bouton a un arrière-plan bleu, car le nouveau sélecteur obtient un score de spécificité de 20 points (0-2-0).

Avec un score de spécificité correspondant, l'instance la plus récente gagne

Reprenons l'exemple du bouton pour le moment, et modifions le CSS de la manière suivante:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Le bouton a un fond gris, car les deux sélecteurs ont un score de spécificité identique (0-1-0).

Si vous changez les règles dans l'ordre des sources, le bouton devient alors bleu.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

C'est le seul cas de figure où le CSS le plus récent remporte l'enchère. Pour ce faire, il doit correspondre à la spécificité d'un autre sélecteur qui cible le même élément.

Ressources