EnglishCommencer

Les sélecteurs CSS et la spécificité

Viser des éléments avec les sélecteurs de type, de classe, d'identifiant et d'attribut, les pseudo-classes et les combinateurs, puis calculer la spécificité qui départage deux règles en conflit.

  • 25 cartes
  • 5 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Les chiffres
  5. Mises en situation

Quelques cartes du deck

  • Sélecteur de classe : de quoi s'agit-il ?

    Voir la réponse

    Motif qui vise tous les éléments dont l'attribut class contient un nom donné ; il s'écrit avec un point devant ce nom.

    .note vise <p class="note"> mais aussi <div class="note alerte"> : un élément peut porter plusieurs classes, et une classe peut servir à plusieurs éléments.

  • Quelle est la spécificité de ce sélecteur ?

    ```css
    nav ul li a:hover
    `

    • (0, 1, 4)
    • (0, 0, 5)
    • (1, 0, 4)
    • (0, 4, 1)
    Voir la réponse

    (0, 1, 4)

    Quatre noms d'éléments (nav, ul, li, a) font 4 dans la dernière colonne ; la pseudo-classe :hover compte comme une classe, soit 1 dans la colonne du milieu.

  • Dans nav a, l'espace est le combinateur … : il vise tout a situé dans un nav, à n'importe quelle profondeur.

    Voir la réponse

    Dans nav a, l'espace est le combinateur descendant : il vise tout a situé dans un nav, à n'importe quelle profondeur.

    Seul le combinateur > limite la recherche aux fils directs ; l'espace remonte toute la lignée.

  • Combinateur enfant : de quoi s'agit-il ?

    Voir la réponse

    Symbole > entre deux motifs : il ne retient que les éléments qui sont des fils directs du premier, pas leurs petits-fils.

    nav > a n'atteint pas un lien rangé dans un ul de la barre, alors que nav a (combinateur descendant, une simple espace) l'atteint.

Réviser ce deck