En CSS, les sélecteurs sont des modèles utilisés pour sélectionner des éléments DOM.
Voici un exemple d'utilisation de sélecteurs. Dans le code suivant, a
et h1
sont des sélecteurs:
a { color: black; } h1 { font-size 24px; }
Aide-mémoire des sélecteurs communs
head
sélectionne l'élément avec la head
balise
.red
sélectionne tous les éléments avec la classe 'rouge'
#nav
sélectionne les éléments avec l'identifiant 'nav'
div.row
sélectionne tous les éléments avec la div
balise et la classe 'row'
["]
sélectionne tous les éléments avec l' aria-hidden
attribut avec une valeur de "vrai"
- Sélecteur de caractères génériques. Sélectionne tous les éléments DOM. Voir ci-dessous pour l'utiliser avec d'autres sélecteurs
Nous pouvons combiner les sélecteurs de manière intéressante
Quelques exemples:
li a
Combinateur descendant DOM. Toutes les a
balises qui sont des enfants de li
balises
div.row *
sélectionne tous les éléments qui sont les descendants (ou enfants) des éléments avec la div
balise et la classe 'row'
li > a
Combinateur de différence. Sélectionnez les descendants directs, au lieu de tous les descendants comme les sélecteurs de descendant
li + a
Le combinateur adjacent. Il sélectionne l'élément qui est immédiatement précédé par l'ancien élément. Dans ce cas, seulement le premier a
après chacun li
.
li, a
Sélectionne tous les a
éléments et tous les li
éléments.
li ~ a
Le combinateur frère. Sélectionne l' a
élément suivant un li
élément.
Pseudo-sélecteurs ou pseudo-classes structurelles
Celles-ci sont également utiles pour sélectionner des éléments structurels dans le DOM.
En voici quelques uns:
:first-child
Cibler le premier élément immédiatement à l'intérieur (ou enfant d'un) autre élément
:last-child
Cibler le dernier élément immédiatement à l'intérieur (ou enfant d'un) autre élément
:nth-child()
Ciblez le nième élément immédiatement à l'intérieur (ou enfant d'un) autre élément. Admet entiers, even
, odd
, ou formules
a:not(.name)
Sélectionne tous les a
éléments qui ne font pas partie de la .name
classe
::after
Permet d'insérer du contenu sur une page à partir de CSS, au lieu de HTML. Bien que le résultat final ne soit pas réellement dans le DOM, il apparaît sur la page comme s'il l'était. Ce contenu se charge après les éléments HTML.
::before
Permet d'insérer du contenu sur une page à partir de CSS, au lieu de HTML. Bien que le résultat final ne soit pas réellement dans le DOM, il apparaît sur la page comme s'il l'était. Ce contenu se charge avant les éléments HTML.
Nous pouvons utiliser des pseudo-classes pour définir un état spécial d'un élément du DOM. Mais ils ne désignent pas un élément par eux-mêmes.
Quelques exemples:
:hover
sélectionne un élément survolé par un pointeur de souris
:focus
sélectionne un élément recevant le focus sur le clavier ou par programme
:active
sélectionne un élément sur lequel le pointeur de la souris clique
:link
sélectionne tous les liens qui n'ont pas encore été cliqués
:visited
sélectionne un lien qui a déjà été cliqué
Plus d'informations sur le sélecteur nth-child
Le nth-child
sélecteur est une classe psuedo css prenant un modèle par lequel faire correspondre un ou plusieurs éléments par rapport à leur position parmi les frères et sœurs.
Syntaxe
a:nth-child(pattern) { /* Css goes here */ }
Modèle
Les motifs acceptés par nth-child
peuvent se présenter sous la forme de mots-clés ou d'une équation de la forme An + B.
Mots clés
Impair
Odd renvoie tous les éléments impairs d'un type donné.
a:nth-childe(odd) { /* CSS goes here */ }
Même
Même renvoie tous les éléments pairs d'un type donné.
a:nth-childe(even) { /* CSS goes here */ }
An + B
Renvoie tous les éléments correspondant à l'équation An + B pour chaque valeur entière positive de n (en plus de 0).
Par exemple, ce qui suit correspondra à tous les 3 éléments d'ancrage:
a:nth-childe(3n) { /* CSS goes here */ }
Jeux
CSS Diner est un jeu Web qui enseigne presque tout ce qu'il y a à savoir sur la combinaison de sélecteurs.
Références supplémentaires
Il existe de nombreux autres sélecteurs CSS! Découvrez-les sur CodeTuts, CSS-tricks.com ou sur Mozilla Developer Network.