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, aet h1sont des sélecteurs:
a { color: black; } h1 { font-size 24px; }Aide-mémoire des sélecteurs communs
headsélectionne l'élément avec la headbalise
.red sélectionne tous les éléments avec la classe 'rouge'
#nav sélectionne les éléments avec l'identifiant 'nav'
div.rowsélectionne tous les éléments avec la divbalise et la classe 'row'
["]sélectionne tous les éléments avec l' aria-hiddenattribut 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 aCombinateur descendant DOM. Toutes les abalises qui sont des enfants de libalises
div.row *sélectionne tous les éléments qui sont les descendants (ou enfants) des éléments avec la divbalise et la classe 'row'
li > aCombinateur de différence. Sélectionnez les descendants directs, au lieu de tous les descendants comme les sélecteurs de descendant
li + aLe 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 aaprès chacun li.
li, aSélectionne tous les aéléments et tous les liéléments.
li ~ aLe 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 .nameclasse
::afterPermet 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.
::beforePermet 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-childsé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-childpeuvent 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.