$course$/QCM de NSI/Première/CSS : mise en forme Feuilles de style en cascade (CSS), syntaxe d'une règle,
sélecteurs (élément, classe, identifiant), propriétés
courantes (couleur, taille, marges), modèle de boîte,
cascade et héritage, intégration au HTML.

]]> CSS : mise en forme — Q01 : Que signifie CSS ? Que signifie l'acronyme CSS ?

]]> CSS sépare la structure (HTML) de la
présentation (CSS). Bonne pratique pour la
maintenabilité.

]]> 1.0 0.0 0 true true abc Color and Style System

]]> Cette appellation n'a
pas d'existence officielle.
Le standard porte le nom
Cascading Style Sheets,
mis au point par le W3C.

]]> Cascading Style Sheets

]]> Bonne réponse : feuilles de style en
cascade. La cascade décrit comment les
règles s'appliquent et se combinent quand
plusieurs s'opposent.

]]> Computer Style Sheet

]]> Le sigle officiel est
Cascading Style Sheets.
La notion de « cascade »
est essentielle, car elle
décrit comment les règles
se combinent ou se
surchargent.

]]> Centralized Style Standard

]]> Cette dénomination est
inventée. Le sigle CSS
renvoie aux Cascading
Style Sheets, défini par
le W3C dès 1996.

]]> CSS : mise en forme — Q02 : Syntaxe d'une règle Quelle est la structure d'une règle CSS ?

]]> Exemple : p { color: red; font-size: 16px; }.
Le ; final est facultatif sur la dernière
déclaration mais recommandé.

]]> 1.0 0.0 0 true true abc `css
sélecteur { propriété: valeur; ... }
`

]]> Bonne réponse : sélecteur (qui ?), accolades,
paires propriété : valeur séparées par des
points-virgules.

]]> `css
<sélecteur propriété="valeur">
`

]]> Erreur : c'est plutôt une syntaxe HTML.

]]> `css
sélecteur (propriété = valeur)
`

]]> Erreur : pas de parenthèses ni de signe
égal.

]]> `css
sélecteur -> propriété -> valeur
`

]]> Erreur : syntaxe inventée.

]]> CSS : mise en forme — Q03 : Sélecteur d'élément Comment écrire une règle qui s'applique à
tous les paragraphes <p> ?

]]> Sélecteur d'élément : nom seul (h1, p,
div...). Il sélectionne tous les éléments
de ce type dans la page.

]]> 1.0 0.0 0 true true abc p { ... }

]]> Bonne réponse : on désigne le type
d'élément par son nom (sans <>).

]]> <p> { ... }

]]> Erreur : pas de chevrons en CSS.

]]> #p { ... }

]]> Erreur : # désigne un id, pas un
élément.

]]> .p { ... }

]]> Erreur : . désigne une classe.

]]> CSS : mise en forme — Q04 : Sélecteur de classe Comment cibler les éléments ayant
class="bouton" ?

]]> Mnémonique : . = class (commencent
tous deux par 'c' à l'oreille). Une classe peut
être appliquée à plusieurs éléments.

]]> 1.0 0.0 0 true true abc bouton { ... }

]]> Erreur : sans préfixe, ce serait un
sélecteur d'élément (qui n'existerait pas).

]]> @bouton { ... }

]]> Erreur : @ introduit des règles
spéciales (@media, @import...).

]]> #bouton { ... }

]]> Erreur : # désigne un id (élément
unique).

]]> .bouton { ... }

]]> Bonne réponse : le point désigne une
classe. Très utilisé pour réutiliser un
style sur plusieurs éléments.

]]> CSS : mise en forme — Q05 : Sélecteur d'id Comment cibler l'élément ayant id="navigation" ?

]]> Trois sélecteurs de base : élément (sans
préfixe), classe (.), id (#). On peut les
combiner : p.important (paragraphes ayant
la classe « important »).

]]> 1.0 0.0 0 true true abc navigation { ... }

]]> Erreur : sans préfixe, ce serait un
sélecteur d'élément.

]]> .navigation { ... }

]]> Erreur : . désigne une classe.

]]> *navigation { ... }

]]> Erreur : * est le sélecteur universel
(tous les éléments).

]]> #navigation { ... }

]]> Bonne réponse : le dièse (#) désigne
un id. Comme un id doit être unique, ce
sélecteur cible un seul élément.

]]> CSS : mise en forme — Q06 : Couleur du texte Quelle propriété change la couleur du texte ?

]]> Distinguer color (texte) et
background-color (fond). Plusieurs syntaxes
pour les couleurs : nommée (red),
hexadécimale (#ff0000), rgb, rgba, hsl.

]]> 1.0 0.0 0 true true abc background

]]> Erreur : background (ou
background-color) change la couleur de
fond, pas du texte.

]]> color

]]> Bonne réponse : color: red;,
color: #ff0000;, color: rgb(255, 0, 0);.

]]> font-color

]]> Erreur : propriété inexistante.

]]> text-color

]]> Erreur : propriété inexistante.

]]> CSS : mise en forme — Q07 : Intégrer du CSS Quelle est la meilleure pratique pour
intégrer du CSS dans un projet HTML ?

]]> Trois façons d'intégrer CSS : externe
(<link>), interne (<style>), inline
(style="..."). L'externe est la meilleure
pratique.

]]> 1.0 0.0 0 true true abc Mettre tout le CSS dans un fichier .css séparé, lié via <link> dans <head>

]]> Bonne réponse : séparation des
préoccupations, mise en cache par le
navigateur, partage entre pages, code
maintenable.

]]> Mettre du CSS dans chaque attribut style="..."

]]> Pratique courante mais à éviter :
répétitions, difficile à maintenir, ne
permet pas la réutilisation.

]]> Mettre tout le CSS dans une balise <style> à la fin du <body>

]]> Acceptable pour un prototype, mais le
fichier séparé est meilleur pour les
projets.

]]> Écrire le CSS dans le code JavaScript

]]> Existe (CSS-in-JS) mais hors programme NSI
et peu adapté à des projets simples.

]]> CSS : mise en forme — Q08 : Taille de texte Quelle propriété change la taille du texte ?

]]> Bonnes pratiques : utiliser des unités
relatives (em, rem) pour la
responsivité ; px pour les éléments
d'interface précis.

]]> 1.0 0.0 0 true true abc font-size

]]> Bonne réponse : font-size: 16px;,
font-size: 1.2em;. Unités courantes :
px (pixel), em (relatif au parent),
rem (relatif à la racine), %.

]]> large

]]> Erreur : large est une valeur, pas
une propriété (font-size: large;).

]]> size

]]> Erreur : propriété inexistante en CSS.

]]> text-size

]]> Erreur : propriété inexistante.

]]> CSS : mise en forme — Q09 : Commentaires CSS Comment écrire un commentaire en CSS ?

]]> Bonne pratique : commenter les sections
principales et les valeurs non triviales
(couleurs spécifiques, hacks de
compatibilité).

]]> 1.0 0.0 0 true true abc / commentaire /

]]> Bonne réponse : seule syntaxe valide en
CSS, peut s'étendre sur plusieurs lignes.

]]> // commentaire

]]> Erreur : c'est la syntaxe JavaScript, C++,
Java. CSS ne reconnaît pas //.

]]> -- commentaire

]]> Erreur : c'est la syntaxe SQL.

]]> # commentaire

]]> Erreur : c'est la syntaxe Python.

]]> CSS : mise en forme — Q10 : Lien vers fichier CSS Comment lier un fichier style.css à une page
HTML ?

]]> Convention : nommer la feuille style.css ou
main.css. Pour des styles spécifiques à
certaines pages, plusieurs feuilles peuvent
coexister.

]]> 1.0 0.0 0 true true abc `html
<import "style.css">
`

]]> Erreur : balise inexistante. CSS a @import
mais c'est en CSS, pas en HTML.

]]> `html
<style src="style.css">
`

]]> Erreur : <style> n'a pas d'attribut
src. Il sert à inclure du CSS inline.

]]> `html
<css href="style.css" />
`

]]> Erreur : balise inexistante.

]]> `html
<link rel="stylesheet" href="style.css">
`

]]> Bonne réponse : balise <link> avec
rel="stylesheet" (relation = feuille de
style) et href (chemin). À placer dans
<head>.

]]> CSS : mise en forme — Q11 : Modèle de boîte Dans le modèle de boîte CSS, quels sont les
quatre composants concentriques d'un élément
(de l'intérieur vers l'extérieur) ?

]]> Comme une carte postale dans une enveloppe :
contenu (la carte), padding (le matelas
autour), border (l'enveloppe), margin
(l'espace entre l'enveloppe et la suivante).

]]> 1.0 0.0 0 true true abc bordure, marge, padding, contenu

]]> Erreur : ordre incorrect.

]]> padding, contenu, marge, bordure

]]> Erreur : ordre incorrect.

]]> contenu, padding, bordure, marge

]]> Bonne réponse : content (contenu),
padding (rembourrage interne),
border (bordure), margin (marge
externe).

]]> marge, contenu, bordure, padding

]]> Erreur : ordre incorrect.

]]> CSS : mise en forme — Q12 : Cascade et priorité Si deux règles s'appliquent au même élément,
laquelle l'emporte ?

]]> Calcul de spécificité : (a, b, c) où a =
nombre d'id, b = nombre de classes, c =
nombre d'éléments. Comparaison
lexicographique.

]]> 1.0 0.0 0 true true abc Au hasard

]]> Erreur : la cascade est déterministe.

]]> Celle ayant le plus court sélecteur

]]> Erreur : c'est l'opposé.

]]> Celle ayant la plus grande spécificité (id > classe > élément), ou à spécificité égale, la dernière écrite

]]> Bonne réponse : la cascade hiérarchise par
spécificité, puis par ordre de
déclaration. !important outrepasse
tout (à éviter).

]]> La première écrite dans le fichier

]]> Erreur : c'est l'inverse pour la même
spécificité (la dernière écrite l'emporte).

]]> CSS : mise en forme — Q13 : Héritage Que signifie qu'une propriété CSS est
héritée ?

]]> Toutes les propriétés ne sont pas héritées :
color, font-family oui ; border,
padding, margin non. Forcer
l'héritage : inherit.

]]> 1.0 0.0 0 true true abc Elle ne fonctionne que sur le premier élément

]]> L'héritage en CSS n'est
pas restreint au premier
élément ; il se propage
dans toute la sous-arborescence,
du parent vers ses
descendants.

]]> Elle s'applique à tous les éléments de la page

]]> Erreur : pas global, mais hiérarchique.

]]> Elle est transmise du parent à ses enfants dans l'arbre HTML, sauf surcharge

]]> Bonne réponse : par exemple, color est
héritée : body { color: blue; } rend
tout le texte de la page bleu, sauf si
un descendant la redéfinit.

]]> Elle est interdite par CSS3

]]> Erreur : très utilisée.

]]> CSS : mise en forme — Q14 : Unités CSS Quelle unité est la plus adaptée pour une
taille de texte qui s'adapte à la taille
du parent ?

]]> Bonne pratique d'accessibilité : utiliser
rem pour le texte. L'utilisateur peut
ajuster la taille de base (préférences
navigateur), tout le site s'adapte
proportionnellement.

]]> 1.0 0.0 0 true true abc em ou rem

]]> Bonne réponse : em est relatif au
parent (1.2em = 120 % de la taille du
parent), rem est relatif à la racine.
Adaptatif et accessible.

]]> %

]]> Possible mais moins idiomatique pour
font-size.

]]> cm

]]> Erreur : unité physique, peu adaptée à
l'écran.

]]> px (pixel)

]]> Erreur : taille fixe, pas adaptative.

]]> CSS : mise en forme — Q15 : Sélecteurs combinés Que cible le sélecteur nav a (avec un
espace) ?

]]> Combinateurs : (descendant), > (enfant
direct), + (frère adjacent), ~ (frère).
Et , pour grouper plusieurs sélecteurs.

]]> 1.0 0.0 0 true true abc Le premier <a> après un <nav>

]]> Erreur : ce serait nav + a (frère adjacent).

]]> Tous les <a> descendants d'un <nav> (à n'importe quel niveau d'imbrication)

]]> Bonne réponse : l'espace est le
combinateur de descendance. Pour les
enfants directs : nav > a.

]]> Aucun élément

]]> Le sélecteur nav a
est parfaitement valide
et cible bien des éléments :
tous les liens situés à
l'intérieur d'une zone
de navigation.

]]> Les éléments qui sont à la fois <nav> et <a>

]]> Erreur : c'est nav,a (virgule) qui ciblerait
les deux. Et un élément ne peut être à
la fois nav et a.

]]> CSS : mise en forme — Q16 : Pseudo-classes À quoi sert a:hover { color: red; } ?

]]> Pseudo-classes courantes : :hover (survol),
:active (clic), :focus (focus clavier),
:visited (lien visité), :nth-child(n)
(n-ième enfant).

]]> 1.0 0.0 0 true true abc À cacher tous les liens

]]> Cacher des éléments
relèverait plutôt de
display: none ou
visibility: hidden.
La pseudo-classe :hover
réagit au survol de la
souris ; elle ne masque
rien.

]]> À sélectionner tous les liens visités

]]> Erreur : ce serait :visited.

]]> À empêcher le clic sur les liens

]]> Désactiver un lien se
ferait avec pointer-events: none
ou en supprimant l'attribut
href. La pseudo-classe
:hover n'altère en rien
le comportement du clic.

]]> À changer la couleur des liens lorsque la souris passe dessus

]]> Bonne réponse : :hover est une pseudo-
classe qui réagit à un état (survol
souris). Utile pour le retour visuel.

]]> CSS : mise en forme — Q17 : Couleurs en CSS Lesquels de ces formats désignent la même
couleur (rouge pur) ?

]]> Quatre formats principaux : nommés (147
noms), hex (#rrggbb), rgb/rgba (transparence
via le 4ᵉ canal), hsl/hsla (teinte/saturation/
luminosité, plus intuitif).

]]> 1.0 0.0 0 true true abc red, #ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)

]]> Bonne réponse : tous ces formats
représentent le rouge pur. Choisir selon
ce qui est plus lisible/calculable.

]]> Seulement red et #ff0000

]]> Erreur : les quatre sont équivalents.

]]> Aucun

]]> Au moins l'un de ces
formats représente bien
du rouge ; en réalité,
tous les quatre désignent
exactement la même couleur.

]]> Seulement rgb(255, 0, 0)

]]> La notation rgb(255, 0, 0)
n'est pas la seule à
désigner du rouge pur.
Le mot-clé red, le code
hexadécimal #ff0000 et
la notation HSL produisent
le même résultat.

]]> CSS : mise en forme — Q18 : Trace CSS `css
p { color: blue; }
.important { color: red; }

html
<p class="important">Texte</p>
`
Quelle est la couleur du texte ?

]]> Calcul de spécificité (a,b,c) : a = id, b =
classe/attribut/pseudo-classe, c = élément/
pseudo-élément. Comparaison
lexicographique : (0,1,0) > (0,0,1).

]]> 1.0 0.0 0 true true abc Bleu (la première règle gagne)

]]> Erreur : .important a une plus grande
spécificité.

]]> Rouge (le sélecteur de classe l'emporte sur le sélecteur d'élément)

]]> Bonne réponse : spécificité (0,1,0) pour
.important > spécificité (0,0,1) pour
p. Donc rouge.

]]> Aucune (conflit, le texte reste noir)

]]> Erreur : la cascade résout les conflits.

]]> Violet (mélange)

]]> Le moteur CSS ne réalise
aucun mélange de couleurs
en cas de règles concurrentes.
C'est la règle la plus
spécifique qui s'applique
telle quelle.

]]> CSS : mise en forme — Q19 : Design responsive Qu'est-ce qu'un design responsive ?

]]> Trois piliers du responsive : grilles
flexibles (% au lieu de px), images
flexibles (max-width: 100%), media
queries (@media (max-width: 600px)).

]]> 1.0 0.0 0 true true abc Un design qui change de couleur selon l'humeur

]]> Le terme responsive
renvoie strictement à
l'adaptation à la taille
de l'écran, pas à un
comportement émotionnel.
La détection d'humeur
n'a aucune réalité dans
ce cadre.

]]> Un site qui répond rapidement

]]> C'est lié à la performance, pas au
responsive.

]]> Un design qui s'adapte automatiquement à différentes tailles d'écran (mobile, tablette, ordinateur)

]]> Bonne réponse : utilise @media,
unités relatives, mises en page flexibles
(Flexbox, Grid). Essentiel à l'ère du
mobile.

]]> Un design avec animations

]]> Erreur : sans rapport (animations =
transition, animation).

]]> CSS : mise en forme — Q20 : Plusieurs classes Un élément peut-il avoir plusieurs classes ?

]]> Multi-classes = principe de composition.
Très utilisé par les frameworks (Bootstrap,
Tailwind) : combiner de petits utilitaires
pour bâtir une mise en forme.

]]> 1.0 0.0 0 true true abc Oui, séparées par des virgules

]]> Erreur : virgule produirait une classe
unique nommée « bouton, primaire, grand ».

]]> Non, une seule par élément

]]> Erreur : on peut en mettre plusieurs.

]]> Oui : class="bouton primaire grand" (séparées par des espaces)

]]> Bonne réponse : pratique pour combiner
des styles modulaires. Chaque classe est
appliquée indépendamment.

]]> Non, il faut utiliser un id

]]> Erreur : id et class sont indépendants.

]]> CSS : mise en forme — Q21 : Style ne s'applique pas Mon CSS ne semble pas s'appliquer à un élément.
Quelles sont les causes les plus probables ?

]]> Réflexe : ouvrir l'inspecteur (F12),
sélectionner l'élément, regarder l'onglet
« Styles » pour voir quelles règles
s'appliquent et lesquelles sont surchargées.

]]> 1.0 0.0 0 true true abc HTML5 ne supporte pas CSS

]]> Erreur : c'est l'inverse.

]]> Faute de frappe dans le sélecteur (ex. .bouton au lieu de .button), ou règle plus spécifique qui surcharge, ou fichier CSS non chargé (vérifier la console).

]]> Bonne réponse : trois pistes classiques.
Outils de débogage : inspecteur du
navigateur (F12), onglet « Computed »
montre les styles appliqués réellement et
d'où ils viennent.

]]> Il faut redémarrer le serveur

]]> Possiblement (cache navigateur), mais
rarement la cause profonde.

]]> Le CSS est lent

]]> Le moteur de rendu CSS
applique les règles
quasi instantanément.
Si un style ne s'affiche
pas, la cause est presque
toujours un sélecteur
erroné, une règle plus
spécifique ou un fichier
mal chargé.

]]> CSS : mise en forme — Q22 : Flexbox À quoi sert display: flex; sur un parent ?

]]> Flexbox (1D) et Grid (2D) sont les deux
systèmes modernes de mise en page. Avant
eux, on faisait des mises en page à coups de
float ou de <table>.

]]> 1.0 0.0 0 true true abc À cacher l'élément

]]> Erreur : display: none; cache.

]]> À forcer une bordure

]]> Erreur : sans rapport.

]]> À empêcher le clic

]]> Erreur : sans rapport.

]]> À transformer le parent en conteneur flexible, dont les enfants se disposent en ligne (par défaut) et peuvent être alignés/distribués facilement

]]> Bonne réponse : Flexbox est devenu le
standard pour les mises en page 1D (en ligne ou
en colonne). Propriétés clés :
justify-content, align-items, gap.

]]> CSS : mise en forme — Q23 : Media queries Que fait @media (max-width: 600px) { ... } ?

]]> Stratégie « mobile-first » moderne :
écrire d'abord les styles pour mobile, puis
ajouter @media (min-width: ...) pour les
écrans plus grands.

]]> 1.0 0.0 0 true true abc Empêche l'affichage sur mobile

]]> Erreur : c'est l'inverse.

]]> Charge un autre fichier CSS

]]> Erreur : ne charge rien.

]]> S'applique uniquement à l'impression

]]> Erreur : ce serait @media print.

]]> Applique les règles sur les écrans de 600 pixels de large ou moins (typiquement les téléphones)

]]> Bonne réponse : c'est la base du
responsive. Permet d'avoir une mise en
page spécifique aux petits écrans (police
plus grande, menu hamburger, colonnes
empilées...).

]]> CSS : mise en forme — Q24 : Le mot-clé !important Pourquoi faut-il éviter d'utiliser
!important en CSS ?

]]> Maxime CSS : « Spécificité bien pensée >
!important ». Si on a besoin de
!important, c'est souvent qu'il y a un
problème de structure plus en amont.

]]> 1.0 0.0 0 true true abc Parce qu'il rend les sites lents

]]> Erreur : pas d'impact significatif sur la
performance.

]]> Parce qu'il outrepasse la cascade normale et rend le code difficile à maintenir et à déboguer (on doit alors mettre !important partout pour gagner)

]]> Bonne réponse : !important est l'arme
nucléaire de CSS. À réserver à des cas
précis (surcharger une bibliothèque
tierce qu'on ne peut pas modifier).

]]> Parce que c'est invalide

]]> Erreur : c'est valide.

]]> Parce qu'il ne fonctionne pas en HTML5

]]> Erreur : fonctionne.

]]> CSS : mise en forme — Q25 : Synthèse Parmi les affirmations suivantes sur CSS,
laquelle est fausse ?

]]> Mnémonique : .classe = catégorie (peut
regrouper N éléments) ; #id = identifiant
(un seul). À ne pas confondre.

]]> 1.0 0.0 0 true true abc Le modèle de boîte CSS comprend contenu, padding, bordure, marge

]]> Vrai : modèle fondamental.

]]> CSS sépare la présentation de la structure (HTML)

]]> Vrai : principe fondamental.

]]> La spécificité hiérarchise les sélecteurs : id > classe > élément

]]> Vrai : règle de la cascade.

]]> Un sélecteur de classe (préfixé par .) cible un seul élément à la fois

]]> Faux (donc bonne réponse) : une classe
peut être appliquée à plusieurs
éléments. C'est le id qui est unique
par convention.

]]> CSS : mise en forme — Q26 : Modèle de boîte Dans le modèle de boîte CSS, quel est l'ordre des
espaces autour du contenu, en partant du contenu
vers l'extérieur ?

]]> Le modèle de boîte CSS est central pour
comprendre la mise en page. La propriété
box-sizing: border-box modifie la convention
de mesure : la largeur et la hauteur incluent
alors la bordure et le padding, ce qui simplifie
les calculs de dimensions.

]]> 1.0 0.0 0 true true abc Bordure, marge, padding

]]> Erreur : la marge se trouve toujours à
l'extérieur. La bordure est entre le padding
et la marge, pas avant le padding.

]]> Marge, padding, bordure

]]> Erreur : l'ordre est inversé. Le padding est
le plus proche du contenu, la marge la plus
éloignée.

]]> Padding, bordure, marge

]]> Bonne réponse : autour du contenu, on trouve
d'abord le padding (espace intérieur entre
le contenu et la bordure), puis la bordure
elle-même, puis la marge (espace extérieur
séparant l'élément des autres).

]]> Bordure, padding, marge

]]> Erreur : le padding est à l'intérieur de la
bordure, pas à l'extérieur. La séquence
correcte commence par le padding.

]]> CSS : mise en forme — Q27 : Unités relatives em et rem Quelle est la différence entre les unités CSS em
et rem ?

]]> Bonne pratique : utiliser rem pour les tailles
globales (texte, marges principales) et em pour
les ajustements relatifs à un composant
particulier. Les deux respectent la taille de
base définie par l'utilisateur dans son
navigateur, ce qui aide l'accessibilité.

]]> 1.0 0.0 0 true true abc em est en pixels, rem est en pourcentage

]]> Erreur : ce sont toutes deux des unités
relatives sans dimension fixe en pixels.
Elles dépendent toujours d'une taille de
référence.

]]> em ne fonctionne que sur les polices, rem que sur les marges

]]> Erreur : les deux unités s'appliquent à
n'importe quelle propriété de longueur (taille
de texte, marges, paddings, etc.). Aucune
n'est restreinte à un type particulier.

]]> Aucune, ce sont deux noms équivalents

]]> Erreur : ces deux unités existent toutes les
deux et ne se réfèrent pas à la même grandeur.
Confondre les deux peut conduire à des tailles
imprévisibles.

]]> em est relatif à la taille du parent ; rem est relatif à la taille de la racine (élément <html>)

]]> Bonne réponse : un même 1em peut donner des
tailles différentes selon le parent et
s'amplifier en cas d'imbrication ; rem reste
stable en se référant toujours à
<html>. C'est pourquoi rem est privilégié
pour la typographie globale.

]]> CSS : mise en forme — Q28 : Spécificité d'un sélecteur Parmi les sélecteurs suivants, lequel a la plus
grande spécificité ?

]]> Le calcul de spécificité s'écrit en triplet
(a, b, c) : a = nombre d'id, b = nombre de
classes, attributs et pseudo-classes, c =
nombre d'éléments et pseudo-éléments. La
comparaison est lexicographique. Le mot-clé
!important court-circuite ce calcul, mais il
est à éviter car il rend les styles difficiles à
maintenir.

]]> 1.0 0.0 0 true true abc #header

]]> Bonne réponse : un identifiant a la
spécificité (1, 0, 0), supérieure à toute
combinaison ne comportant pas d'identifiant.
C'est pourquoi il faut utiliser les id avec
parcimonie : ils sont difficiles à surcharger
ensuite.

]]> p

]]> Erreur : un sélecteur d'élément seul a la plus
faible spécificité, à savoir (0, 0, 1). Tout
autre sélecteur listé ici le surclasse.

]]> .menu

]]> Erreur : un sélecteur de classe a la
spécificité (0, 1, 0), supérieure à un
élément, mais inférieure à un identifiant.

]]> p.menu

]]> Erreur : ce sélecteur combine un élément et
une classe, soit la spécificité (0, 1, 1).
C'est plus fort qu'une simple classe ou un
simple élément, mais cela reste inférieur à
un identifiant.

]]>