L
es sélecteurs et mécanismes fondamentaux du CSS constituent une base incontournable pour toute personne souhaitant maîtriser la mise en forme des pages web.
Ils permettent de contrôler précisément l’apparence des éléments, tout en respectant une logique claire et hiérarchisée.
Dans les études en informatique, les formations en développement web ou les concours techniques, ces notions sont régulièrement évaluées car elles traduisent une réelle compréhension du fonctionnement du langage CSS.
À travers ces QCM, l’apprenant est amené à mobiliser des concepts clés tels que la sélection des éléments, la gestion des priorités entre règles concurrentes, ainsi que les mécanismes d’héritage et de cascade.
Ces notions structurent la manière dont les styles sont appliqués et interprétés par le navigateur.
En les comprenant, on évite les erreurs courantes et on gagne en efficacité lors de la conception d’interfaces.
Cette approche pédagogique vise à accompagner le lecteur pas à pas dans l’acquisition de réflexes solides et durables en CSS.
Les sélecteurs et mécanismes fondamentaux du CSS constituent une base incontournable pour toute personne souhaitant maîtriser la mise en forme des pages web.
Ils permettent de contrôler précisément l’apparence des éléments, tout en respectant une logique claire et hiérarchisée.
Dans les études en informatique, les formations en développement web ou les concours techniques, ces notions sont régulièrement évaluées car elles traduisent une réelle compréhension du fonctionnement du langage CSS.
À travers ces QCM, l’apprenant est amené à mobiliser des concepts clés tels que la sélection des éléments, la gestion des priorités entre règles concurrentes, ainsi que les mécanismes d’héritage et de cascade.
Ces notions structurent la manière dont les styles sont appliqués et interprétés par le navigateur.
En les comprenant, on évite les erreurs courantes et on gagne en efficacité lors de la conception d’interfaces.
Cette approche pédagogique vise à accompagner le lecteur pas à pas dans l’acquisition de réflexes solides et durables en CSS.
QCM
1
Corrigé
Lequel de ces sélecteurs a la plus grande spécificité ?
A. nav ul li a
B. .menu-link
C. #main-nav a
D. div .nav-item
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
L'identifiant (#) pèse beaucoup plus lourd (100) que les classes (10) ou les balises (1).
QCM
2
Corrigé
Que signifie la règle '!important' à la fin d'une propriété CSS ?
A. Elle rend la propriété invisible
B. Elle force la priorité de la règle, ignorant la spécificité classique
C. Elle indique une erreur de syntaxe
D. Elle n'est lue que par les navigateurs mobiles
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
!important court-circuite la cascade, mais son usage doit être limité pour la maintenabilité.
QCM
3
Corrigé
Quel sélecteur cible tous les éléments <a> dont l'attribut href contient le mot 'google' ?
A. a[href^='google']
B. a[href$='google']
C. a[href*='google']
D. a[href='google']
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
'*=' est le sélecteur d'attribut pour 'contient n'importe où dans la chaîne'.
QCM
4
Corrigé
Comment appelle-t-on le mécanisme où un élément enfant récupère la couleur de texte de son parent ?
A. La cascade
B. L'héritage
C. La spécificité
D. La propagation
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
L'héritage permet à certaines propriétés (comme color ou font-family) de descendre dans l'arbre DOM.
QCM
5
Corrigé
Quel sélecteur cible un élément <li> seulement s'il est le fils direct d'un <ul> ?
A. ul li
B. ul > li
C. ul + li
D. ul ~ li
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le symbole '>' est le sélecteur d'enfant direct (descendant de premier niveau).
QCM
6
Corrigé
Si deux règles identiques s'appliquent avec la même spécificité, laquelle l'emporte ?
A. La première écrite dans le fichier
B. La dernière écrite dans le fichier
C. Celle qui utilise une classe
D. Le navigateur choisit aléatoirement
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Selon le principe de la cascade, à spécificité égale, la dernière règle déclarée est prioritaire.
QCM
7
Corrigé
Que cible le sélecteur 'h1 + p' ?
A. Tous les paragraphes dans un h1
B. Le premier paragraphe situé juste après un h1
C. Tous les paragraphes suivant un h1
D. Le paragraphe parent d'un h1
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le '+' est le sélecteur de frère adjacent (le suivant immédiat).
QCM
8
Corrigé
Quel sélecteur cible les éléments <input> qui ne sont pas en lecture seule ?
A. input:not([readonly])
B. input:read-write
C. input:active
D. input:not(:disabled)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
La pseudo-classe :read-write cible les éléments modifiables par l'utilisateur.
QCM
9
Corrigé
Quelle est la valeur de spécificité d'une classe CSS (ex: .btn) ?
A. 0,0,0,1
B. 0,0,1,0
C. 0,1,0,0
D. 1,0,0,0
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Dans le système de calcul (Style, ID, Classe, Balise), la classe occupe la deuxième position (0,0,1,0).
QCM
10
Corrigé
Le sélecteur universel '*' a-t-il une influence sur la spécificité ?
A. Oui, il pèse comme une balise
B. Oui, il pèse comme une classe
C. Non, sa spécificité est de 0
D. Il annule toutes les autres règles
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Le sélecteur '*' n'ajoute aucun poids à la spécificité d'une règle.
QCM
11
Corrigé
Comment cibler un élément <p> qui est le deuxième enfant de son parent, quel que soit son type ?
A. p:nth-of-type(2)
B. p:nth-child(2)
C. p:second-child
D. p:item(2)
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
nth-child(2) vérifie si l'élément est le 2ème enfant ET s'il s'agit d'un paragraphe.
QCM
12
Corrigé
Que permet de faire 'a:not(.external)' ?
A. Cibler les liens qui ont la classe external
B. Cibler les liens qui n'ont pas la classe external
C. Supprimer la classe external de tous les liens
D. Cibler uniquement les liens externes
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:not() est une pseudo-classe de négation.
QCM
13
Corrigé
Lequel n'est PAS un pseudo-élément ?
A. ::before
B. ::after
C. ::hover
D. ::first-letter
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
:hover est une pseudo-classe (état), alors que les pseudo-éléments (::) créent des éléments virtuels.
QCM
14
Corrigé
Que se passe-t-il si vous appliquez 'color: inherit;' à un élément ?
A. Il devient transparent
B. Il force la récupération de la couleur de son parent direct
C. Il utilise la couleur par défaut du navigateur
D. Il inverse les couleurs
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le mot-clé 'inherit' force l'héritage d'une propriété, même si elle n'est pas héritée par défaut.
QCM
15
Corrigé
Quelle propriété CSS permet de définir si les majuscules sont héritées ou transformées ?
A. text-transform
B. font-style
C. case-sensitive
D. text-decoration
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
text-transform (uppercase, lowercase, capitalize) gère la casse du texte.
QCM
16
Corrigé
Que fait le sélecteur 'div ~ p' ?
A. Cible le paragraphe enfant de div
B. Cible tous les paragraphes qui sont des frères d'un div et situés après lui
C. Cible le paragraphe situé juste avant un div
D. Cible uniquement le dernier paragraphe d'un div
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Le '~' est le sélecteur de frères généraux.
QCM
17
Corrigé
Comment cibler un <div> qui contient l'attribut 'data-v' peu importe sa valeur ?
A. div[data-v]
B. div.data-v
C. div(data-v)
D. div#data-v
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'utilisation de crochets sans valeur teste simplement la présence de l'attribut.
QCM
18
Corrigé
Quelle pseudo-classe cible un élément qui n'a pas d'enfant du tout ?
A. :blank
B. :empty
C. :no-child
D. :void
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:empty cible les éléments sans enfants, ni même de texte (les espaces comptent comme du texte).
QCM
19
Corrigé
Où s'insère le pseudo-élément '::after' par rapport au contenu de l'élément ?
A. Juste après la balise fermante
B. À la toute fin, juste avant la balise fermante
C. Juste avant la balise ouvrante
D. Au milieu du texte
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
::after insère du contenu comme dernier enfant de l'élément visé.
QCM
20
Corrigé
Quelle est la spécificité d'un style 'inline' écrit directement dans le HTML ?
A. 0,0,0,0
B. 0,1,0,0
C. 1,0,0,0
D. Elle est infinie
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Les styles inline (attribut style='') l'emportent sur tous les sélecteurs du fichier CSS (sauf !important).
QCM
21
Corrigé
Quel sélecteur cible les éléments activés par une tabulation au clavier ?
A. :hover
B. :active
C. :focus
D. :visited
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
:focus est crucial pour l'accessibilité numérique.
QCM
22
Corrigé
Que permet la pseudo-classe ':root' ?
A. Cibler le pied de page
B. Cibler l'élément le plus haut dans l'arbre (généralement <html>)
C. Supprimer les marges par défaut
D. Définir des animations
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
:root est utilisé principalement pour déclarer des variables CSS globales.
QCM
23
Corrigé
Lequel de ces sélecteurs est le plus 'coûteux' en termes de performance pour le navigateur ?
A. #id
B. .class
C. div ul li a
D. a
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Les sélecteurs descendants longs obligent le navigateur à parcourir l'arbre DOM de droite à gauche plusieurs fois.
QCM
24
Corrigé
Comment cibler le premier enfant d'un type précis (ex: le premier <p> d'une div) ?
A. p:first-child
B. p:first-of-type
C. p:nth-child(1)
D. p:start
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
first-of-type garantit de cibler le premier <p> même s'il y a un <h2> avant lui.
QCM
25
Corrigé
Quelle propriété permet de réinitialiser une propriété à sa valeur par défaut navigateur ?
A. initial
B. unset
C. revert
D. Toutes ces réponses
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
D
Justification :
Initial, unset et revert permettent de manipuler la cascade pour nettoyer les styles.
QCM
26
Corrigé
Que fait le sélecteur 'input:checked + label' ?
A. Il coche la case quand on clique sur le label
B. Il stylise le label qui suit une case cochée
C. Il masque l'input
D. Il lie l'input au label
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
C'est une technique courante pour créer des boutons personnalisés en pur CSS.
QCM
27
Corrigé
Quel attribut est utilisé avec ::before ou ::after pour afficher du contenu ?
A. text
B. value
C. content
D. display
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
Sans la propriété 'content', les pseudo-éléments ::before et ::after ne s'affichent pas.
QCM
28
Corrigé
Que cible 'p::first-line' ?
A. Le premier mot d'un paragraphe
B. Uniquement la première ligne affichée d'un paragraphe
C. Le premier paragraphe de la page
D. La ligne de bordure haute
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
B
Justification :
Ce pseudo-élément est dynamique : il s'adapte si la largeur de la fenêtre change la coupure des mots.
QCM
29
Corrigé
Quel sélecteur cible un lien déjà cliqué ?
A. a:hover
B. a:active
C. a:visited
D. a:focus
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
C
Justification :
:visited permet de différencier les liens consultés pour l'expérience utilisateur.
QCM
30
Corrigé
Quel est l'ordre correct (recommandé) des pseudo-classes de liens pour éviter les conflits ?
A. Link, Visited, Hover, Active
B. Hover, Active, Link, Visited
C. Active, Hover, Visited, Link
D. L'ordre n'a aucune importance
Afficher la réponse
Cliquez pour voir la correction
Réponse correcte :
A
Justification :
L'ordre 'LVHA' est nécessaire car chaque règle peut écraser la précédente à cause de la cascade.
Mots & Définitions
Consultez les définitions des termes importants.
La spécificité est un mécanisme qui permet au navigateur de déterminer quelle règle CSS doit être appliquée lorsqu’il y a plusieurs styles concurrents. Elle repose sur un système de pondération basé sur le type de sélecteur utilisé. Comprendre la spécificité est essentiel pour éviter les conflits de styles.
Un sélecteur CSS permet de cibler un ou plusieurs éléments HTML afin de leur appliquer des styles. Il peut se baser sur le type d’élément, une classe, un identifiant ou une relation dans le document. Le choix du sélecteur influence la lisibilité et la performance du code.
La cascade définit l’ordre de priorité des règles CSS lorsque plusieurs styles s’appliquent à un même élément. Elle prend en compte la spécificité, l’ordre d’écriture et certaines règles particulières. C’est un principe fondamental du fonctionnement du CSS.
L’héritage est le mécanisme par lequel certaines propriétés CSS sont transmises d’un élément parent à ses enfants. Il permet de réduire la répétition du code et d’assurer une cohérence visuelle. Toutes les propriétés ne sont pas héritables par défaut.
La directive !important permet de forcer la priorité d’une règle CSS sur les autres. Elle dépasse les règles normales de spécificité. Son usage doit rester exceptionnel pour éviter des styles difficiles à maintenir.
Un sélecteur d’attribut cible des éléments en fonction de la présence ou de la valeur d’un attribut HTML. Il permet d’appliquer des styles sans ajouter de classes supplémentaires. C’est un outil puissant pour des sélections précises.
Une pseudo-classe décrit un état particulier d’un élément, comme une interaction utilisateur ou une position dans le document. Elle ne modifie pas le HTML mais enrichit le comportement visuel. Les pseudo-classes sont très utilisées pour l’accessibilité et l’interactivité.
Un pseudo-élément permet de styliser une partie spécifique d’un élément, comme une première ligne ou un contenu généré. Il agit comme un élément virtuel ajouté au document. Cela offre des possibilités avancées de mise en forme.
Les sélecteurs de relation ciblent des éléments en fonction de leur position par rapport à d’autres éléments. Ils permettent de styliser des frères, des enfants directs ou des éléments adjacents. Ces relations structurent finement le rendu CSS.
Le sélecteur universel cible tous les éléments d’un document. Il est souvent utilisé pour des réinitialisations globales. Sa spécificité est nulle, ce qui le rend facilement surchargeable.
Les styles inline sont définis directement dans l’attribut style d’un élément HTML. Ils ont une priorité élevée dans la cascade CSS. Leur utilisation complique toutefois la maintenance du code.
Le contenu généré permet d’insérer du texte ou des éléments décoratifs via le CSS. Il est principalement utilisé avec des pseudo-éléments. Cette technique évite d’alourdir le HTML.
À propos de ce QCM
L
es thèmes abordés dans cette série de QCM couvrent les fondations essentielles du CSS moderne.
Une attention particulière est portée aux différents types de sélecteurs, qui permettent de cibler des éléments selon leur nature, leurs attributs ou leurs relations dans le document.
Cette maîtrise est indispensable pour écrire des styles précis, lisibles et bien structurés.
La compréhension de la spécificité et de la cascade joue également un rôle central.
Ces mécanismes expliquent pourquoi certaines règles prennent le dessus sur d’autres et comment le navigateur résout les conflits.
Ils permettent d’anticiper le rendu final et d’éviter des solutions artificielles ou excessives.
L’héritage complète cette logique en favorisant la transmission naturelle de certaines propriétés, contribuant ainsi à une meilleure cohérence visuelle.
Les QCM abordent aussi les pseudo-classes et pseudo-éléments, qui enrichissent l’expérience utilisateur sans modifier la structure HTML.
Ils permettent de réagir aux interactions, de cibler des états particuliers ou de styliser des parties spécifiques d’un contenu.
Enfin, des notions comme le contenu généré ou les styles inline mettent en lumière des choix techniques à utiliser avec discernement.
Travailler ces concepts développe des compétences clés : analyse du code existant, écriture de styles robustes, auto-évaluation et préparation efficace aux examens ou concours.
L’objectif est d’aller au-delà de la simple mémorisation pour construire une compréhension logique et durable du CSS.
Conclusion
C
es QCM constituent un excellent support pour consolider les bases du CSS et affiner sa compréhension des mécanismes internes du langage.
Ils permettent de renforcer des notions essentielles comme la sélection des éléments, la gestion des priorités et l’organisation des styles.
En s’entraînant régulièrement, l’apprenant développe des automatismes précieux et gagne en assurance face à des situations concrètes.
Cette progression continue favorise une meilleure maîtrise du CSS, indispensable aussi bien dans un cadre académique que professionnel.
