Utilisation des pseudo-classes structurelles et fonctionnelles
Les pseudo-classes permettent de cibler précisément des éléments en fonction de leur ordre au sein d’un conteneur. Examinons quelques-unes des plus couramment utilisées.
:first-child
La pseudo-classe :first-child cible un élément qui est le premier enfant de son parent, quel que soit son nom de balise ou sa classe. Considérons l’exemple suivant pour clarifier. Nous avons un ensemble d’éléments, et uniquement pour le premier élément (le premier élément <li>), nous souhaitons définir sa propriété color sur blue.
index.html
styles.css
Sortie
Seul le premier élément de la FAQ a été sélectionné, et des styles spécifiques ont été appliqués.
:last-child
La pseudo-classe :last-child cible le dernier enfant de son parent, ce qui permet de modifier n'importe laquelle de ses propriétés. Prenons un exemple pour illustrer comment utiliser efficacement cette pseudo-classe.
index.html
styles.css
Sortie
:nth-child
La pseudo-classe :nth-child permet de sélectionner des éléments en fonction de leur position dans une liste de frères et sœurs. Il est possible de cibler simplement en spécifiant un nombre. Par exemple :
index.html
styles.css
Résultat
Les styles d’accentuation ont été appliqués uniquement aux éléments sélectionnés (2ème et 3ème).
:nth-child avancé
Pour des scénarios plus complexes, il est possible d'utiliser la formule an+b afin de sélectionner plusieurs éléments selon leur position. Voici le fonctionnement de la formule :
adétermine le motif de répétition (par exemple, chaque 2ᵉ, 3ᵉ enfant, etc.) ;bdéfinit le point de départ ou le décalage pour la sélection ;nagit comme un compteur qui s'incrémente à chaque itération, en commençant à 0.
Examinons quelques sélecteurs typiques.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Remarque
Il n'est pas nécessaire de mémoriser tous les sélecteurs. Il est toujours possible de les rechercher sur Google.
:not()
La pseudo-classe :not() cible les éléments qui ne correspondent pas à un sélecteur spécifié. Par exemple, :not(p) sélectionnera tous les éléments sauf les éléments <p>. Examinons quelques exemples :
index.html
index.css
1. Quelle pseudo-classe peut être utilisée pour sélectionner le premier élément dans un ensemble d’éléments ?
2. À quoi sert la pseudo-classe nth-child ?
3. Comment fonctionne la pseudo-classe last-child ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain how the :not() pseudo-class works with multiple selectors?
Could you provide more examples of using :not() in CSS?
What are some common use cases for the :not() pseudo-class?
Awesome!
Completion rate improved to 2.56Utilisation des pseudo-classes structurelles et fonctionnelles
Glissez pour afficher le menu
Les pseudo-classes permettent de cibler précisément des éléments en fonction de leur ordre au sein d’un conteneur. Examinons quelques-unes des plus couramment utilisées.
:first-child
La pseudo-classe :first-child cible un élément qui est le premier enfant de son parent, quel que soit son nom de balise ou sa classe. Considérons l’exemple suivant pour clarifier. Nous avons un ensemble d’éléments, et uniquement pour le premier élément (le premier élément <li>), nous souhaitons définir sa propriété color sur blue.
index.html
styles.css
Sortie
Seul le premier élément de la FAQ a été sélectionné, et des styles spécifiques ont été appliqués.
:last-child
La pseudo-classe :last-child cible le dernier enfant de son parent, ce qui permet de modifier n'importe laquelle de ses propriétés. Prenons un exemple pour illustrer comment utiliser efficacement cette pseudo-classe.
index.html
styles.css
Sortie
:nth-child
La pseudo-classe :nth-child permet de sélectionner des éléments en fonction de leur position dans une liste de frères et sœurs. Il est possible de cibler simplement en spécifiant un nombre. Par exemple :
index.html
styles.css
Résultat
Les styles d’accentuation ont été appliqués uniquement aux éléments sélectionnés (2ème et 3ème).
:nth-child avancé
Pour des scénarios plus complexes, il est possible d'utiliser la formule an+b afin de sélectionner plusieurs éléments selon leur position. Voici le fonctionnement de la formule :
adétermine le motif de répétition (par exemple, chaque 2ᵉ, 3ᵉ enfant, etc.) ;bdéfinit le point de départ ou le décalage pour la sélection ;nagit comme un compteur qui s'incrémente à chaque itération, en commençant à 0.
Examinons quelques sélecteurs typiques.
/* Selects every second element (2, 4, 6, ...) */
.item:nth-child(2n) {
/* Styles for every second element */
}
/* Selects the first three elements */
.item:nth-child(-n + 3) {
/* Styles for the first three elements */
}
/* Selects all odd elements */
.item:nth-child(odd) {
/* Styles for all odd elements */
}
/* Selects every second child starting from the first (1, 3, 5, ...) */
.item:nth-child(2n+1) {
/* Styles for the last three elements */
}
Remarque
Il n'est pas nécessaire de mémoriser tous les sélecteurs. Il est toujours possible de les rechercher sur Google.
:not()
La pseudo-classe :not() cible les éléments qui ne correspondent pas à un sélecteur spécifié. Par exemple, :not(p) sélectionnera tous les éléments sauf les éléments <p>. Examinons quelques exemples :
index.html
index.css
1. Quelle pseudo-classe peut être utilisée pour sélectionner le premier élément dans un ensemble d’éléments ?
2. À quoi sert la pseudo-classe nth-child ?
3. Comment fonctionne la pseudo-classe last-child ?
Merci pour vos commentaires !
