PhpBB Lab Académie

Comprendre la spécificité entre p, .introduction et p.introduction, lire un sélecteur descendant utile au menu et retirer les règles de test.

Compléter ce que l’ordre ne suffit pas à expliquer

Nous repartons de l’unique règle .introduction { color: #374151; }. Les trois paragraphes concernés sont ceux déjà identifiés sur les trois pages.

La spécificité se calcule à partir de la composition d’un sélecteur. Elle ne mesure pas combien d’éléments sont réellement sélectionnés, ni la longueur du nom de classe. Nous comparons ici des règles ordinaires de même origine, sans styles en ligne, !important ni couches de cascade.

1. Une classe face à un élément

Ajoutez temporairement en bas de styles.css :

p {
    color: #7f1d1d;
}

Les introductions restent #374151 : leur classe a une spécificité supérieure à celle du simple sélecteur p. D’autres paragraphes peuvent devenir rouges, car ils n’ont pas de déclaration directe concurrente plus spécifique. C’est un effet global de l’essai, pas une instruction à conserver.

La règle p ne gagne donc pas seulement parce qu’elle est écrite après .introduction.

2. Combiner un élément et une classe

Le sélecteur p.introduction, sans espace, signifie « un p qui porte la classe introduction ». Il décrit le même élément avec deux conditions.

Ajoutez temporairement :

p.introduction {
    color: #163b65;
}

Ce sélecteur contient une classe et un type d’élément. Il est plus spécifique que .introduction seule : les trois introductions deviennent bleues. Dans les comparaisons de cette leçon, l’ordre est donc p, puis .introduction, puis p.introduction, de la spécificité la plus faible à la plus forte.

À spécificité égale, l’ordre étudié précédemment intervient. Ces trois exemples ne constituent pas une liste complète de tous les sélecteurs CSS.

3. Ne pas confondre l’espace et l’absence d’espace

Pour préparer la navigation, lisez maintenant nav a. L’espace signifie « les liens a qui se trouvent à l’intérieur d’un nav », même avec ul et li entre les deux. C’est un sélecteur descendant.

Dans notre site, il correspond aux liens Accueil, À propos et Contact. Il ne signifie pas qu’un même élément serait à la fois nav et a. Nous n’ajoutons aucune règle nav a pour le moment ; cette lecture servira à la mise en forme du menu.

De même, une classe suivie d’un espace puis a pourra cibler les liens contenus dans cet élément.

4. Corriger avec le sélecteur nécessaire, pas le plus fort possible

Un sélecteur plus spécifique n’est pas automatiquement un meilleur choix. Il peut rendre les adaptations plus difficiles. Pour nos introductions, .introduction suffit ; nous n’avons pas besoin de p.introduction dans la version finale.

Le mot-clé !important modifie un autre niveau de priorité. Nous ne l’utilisons pas pour masquer un conflit mal compris.

5. Nettoyer et expliquer

Supprimez les deux règles temporaires p et p.introduction. Gardez .introduction avec #374151. Les paragraphes ordinaires doivent retrouver la base héritée depuis body et les notes ne doivent conserver aucune couleur rouge d’essai.

Vous pouvez maintenant diagnostiquer une propriété : quelles règles ciblent l’élément, lesquelles sont directes, quelle spécificité ont-elles, puis quel est leur ordre en cas d’égalité ? Le chapitre suivant utilisera ces bases pour mettre en forme la vraie navigation.

Ces règles servent uniquement à l’expérience :

.introduction {
    color: #374151;
}

p {
    color: #7f1d1d;
}

p.introduction {
    color: #163b65;
}

La dernière règle gagne ici par sa spécificité. Déplacée avant les deux autres, elle gagnerait encore dans ce contexte.

Étape 1

Ajoutez le bloc p rouge après .introduction et vérifiez que les introductions restent grises.

Étape 2

Ajoutez p.introduction bleu. Prédisez le résultat sur le premier paragraphe de chacune des trois pages.

Étape 3

Déplacez temporairement p.introduction avant les autres blocs : sa spécificité reste la même.

Étape 4

Retirez p et p.introduction. Conservez .introduction avec #374151.

Étape 5

Expliquez la différence entre p.introduction et nav a, puis vérifiez que le tableau et les paragraphes n’ont gardé aucun style d’essai.

La spécificité dépend de la composition du sélecteur. Une classe gagne ici face à p ; p.introduction ajoute la précision d’un type. L’espace de nav a exprime une relation de descendance. Les règles d’essai ont été retirées.