★ À maîtriser
Pour rendre la navigation clavier aussi visible que la navigation à la souris, donnez le même style à :hover et à :focus.
Pour les liens, écrivez les pseudo-classes dans l’ordre :link, :visited, :hover, :active, car à spécificité égale la dernière règle l’emporte.
Ne masquez pas le contour de focus avec outline: none sans le remplacer par un indicateur visible, par exemple avec :focus-visible.
:hover cible un élément survolé par la souris, :focus un élément qui reçoit le focus, et :active un élément en cours de clic.
:nth-child(odd) cible les positions impaires, :nth-child(even) les positions paires et :nth-child(3n) une position sur trois.
Compléments
1. Pour que le style de survol puisse l’emporter sur les styles précédents d’un lien à spécificité égale, dans quel ordre faut-il écrire les pseudo-classes ?
2. Quel état CSS correspond à un élément qui reçoit le focus, par exemple lorsqu’on y accède au clavier ?
3. Quelle déclaration est nécessaire pour que ::after génère son contenu, même si aucun caractère visible n’est ajouté ?
Que cible chacune des pseudo-classes :hover, :focus et :active ?
:hover cible un élément survolé, :focus un élément focalisé et :active un élément en cours de clic.
Quel indicateur doit remplacer outline: none pour le focus clavier ?
Un indicateur visible, par exemple avec :focus-visible.
Comment s’écrivent les pseudo-éléments et que permettent-ils de cibler ?
Ils s’écrivent avec deux deux-points et ciblent une partie d’un élément.
Quelle propriété est nécessaire à ::before et ::after ?
La propriété content.
Qu’est-ce que Flexbox permet de faire sur un seul axe ?
D’aligner et de répartir des éléments en ligne ou en colonne.
Où déclare-t-on `display: flex` pour créer des éléments flex ?
Sur le conteneur parent, dont les enfants directs deviennent des éléments flex.
La fiche de révision couvre les notions essentielles de Pseudo-classes et mises en page CSS. Elle est structurée par thématiques pour faciliter l'apprentissage et la mémorisation, avec des définitions clés, des explications et des synthèses.
Lire la fiche complète →Le QCM contient 11 questions à choix multiples avec corrections détaillées et explications pour chaque réponse. Idéal pour tester tes connaissances et identifier tes lacunes.
Faire le QCM (11 questions) →Revizly propose 10 flashcards interactives sur Pseudo-classes et mises en page CSS. Chaque carte présente une question au recto et la réponse au verso, permettant une révision active et efficace basée sur la répétition espacée.
Voir toutes les 10 flashcards →NSI · Terminale
Développement (SLAM) · BTS SIO
NSI · Terminale
NSI · Terminale
NSI · Terminale
NSI · Terminale
Importe ton PDF ou colle ton cours, l'IA génère fiches, QCM et flashcards en 30 secondes.