Aide-mémoire des sélecteurs CSS

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.