Les sélecteurs CSS permettent de cibler des éléments et pseudo-éléments HTML. Ici, nous voyons tous les sélecteurs avec un exemple et une explication pour chacun.
CSS: Les sélecteurs simples
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
h2 {} | Le sélecteur de type permet de cibler les éléments HTML du même nom. Ici, toutes les titres H2. |
.my-class {} | Le sélecteur de class permet de cibler les éléments ayants l’attribut « class » spécifié. |
#my-id {} | Le sélecteur d’ID permet de cibler les éléments ayants l’attribut « id » spécifié. |
* {} | Le sélecteur universel permet de cibler tous les éléments. |
CSS: Les combinateurs de sélecteurs
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
h1, h2 {} | Ce sélecteur permet de cibler tous les H1 et tous les H2. |
p a {} | Ce sélecteur permet de cibler tous les liens contenus a l’intérieur d’un paragraphe. |
p > a {} | Ce sélecteur permet de cibler les liens ayants comme parent immédiat un paragraphe. |
h1 + h2 {} | Ce sélecteur permet de cibler tous les H2 directement placés après un titre H1. |
h1 ~ p {} | Ce sélecteur permet de cibler tous les H1 précédés par un paragraphe. |
CSS: Les sélecteurs d’attributs
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
[target] {} | Permet de cibler les éléments ayants un attribut « target ». |
[title~=wprock] {} | Ce sélecteur permet de cibler tous les éléments HTML ayants un attribut « title » contenant le mot « wprock ». |
a[href^="https"] {} | Ce sélecteur permet de cibler tous les liens ayants un attribut « href » commençant par « https ». |
a[href$=".pdf"] {} | Ce sélecteur permet de cibler tous les liens ayant un attribut « href » finissant par « .pdf ». |
a[href*="wprock.fr"] {} | Ce sélecteur permet de cibler tous les éléments HTML ayant un attribut « href » contenant « wprock.fr ». |
CSS: Les pseudo-éléments
Les sélecteurs CSS de pseudo éléments se reconnaissent par l’utilisation de « :: ».
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
a:link {} | Permet de cibler les liens qui n’ont pas été visités. |
a:visited {} | Permet de cibler les liens qui ont été visités. |
a:hover {} | Permet de cibler un lien survolé avec la souris. |
a:active {} | Permet de cibler le lien sélectionné. |
CSS: Les pseudo-class
Les sélecteurs CSS de pseudo class se reconnaissent par l’utilisation de « : ». Ils permettent de cibler des éléments selon leurs états.
CSS: Les pseudo-class pour les liens
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
a:link {} | Permet de cibler les liens qui n’ont pas été visités. |
a:visited {} | Permet de cibler les liens qui ont été visités. |
a:hover {} | Permet de cibler un lien survolé par la souris. |
a:active {} | Permet de cibler le lien sélectionné. |
CSS: Les pseudo-class pour les formulaires
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
input:checked {} | Permet de sélectionner tous les éléments input cochés. |
input:disabled {} | Permet de sélectionner tous les éléments input désactivés. |
input:enabled {} | Permet de sélectionner tous les éléments input activés. |
input:focus {} | Permet de sélectionner l’élément input qui a le focus. |
input:in-range {} | Permet de sélectionner tous les éléments input de types nombre(« number ») dont les valeurs sont comprise dans les limites spécifiées (attribut « min » et « max »). |
input:out-of-range {} | Permet de sélectionner tous les éléments input de types nombre (« number ») dont les valeurs ne sont pas comprise dans les limites spécifiées (attribut « min » et « max »). |
input:invalid {} | Permet de sélectionner tous les éléments input dont les valeurs sont invalides. |
input:valid {} | Permet de sélectionner tous les éléments input dont les valeurs sont valides. |
input:optional {} | Permet de sélectionner tous les éléments input dont qui n’ont pas d’attribut « required ». |
input:required {} | Permet de sélectionner tous les éléments input dont qui ont d’attribut « required ». |
input:read-only {} | Permet de sélectionner tous les éléments input qui ont l’attribut « readonly ». |
input:read-write {} | Permet de sélectionner tous les éléments input qui n’ont pas d’attribut « readonly ». |
CSS: Les pseudo-class par position
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
h2:first-child {} | Permet de sélectionner tous les H2 qui sont les premiers enfants de leurs parents. |
h2:last-child {} | Permet de sélectionner tous les H2 qui sont les derniers enfants de leurs parents. |
h2:first-of-type {} | Permet de sélectionner tous les éléments H2 qui sont les premiers éléments H2 de leurs parents. |
h2:last-of-type {} | Permet de sélectionner tous les éléments H2 qui sont les derniers éléments de leurs parents. |
h2:nth-child(2) {} | Permet de sélectionner tous les éléments H2 qui sont les deuxièmes enfants de leurs parents |
h2:nth-last-child(2) {} | Permet de sélectionner tous les éléments H2 qui sont les deuxièmes enfants de leurs parents. Le compte commence à partir du dernier enfant. |
h2:nth-last-of-type(2) {} | Permet de sélectionner tous les éléments H2 qui sont les deuxièmes éléments de leurs parents. Le compte commence à partir du dernier enfant. |
h2:nth-of-type(2) {} | Permet de sélectionner tous les éléments H2 qui sont les deuxièmes éléments de leurs parents. |
CSS: Les autres sélecteurs de pseudo-class
| Exemple de syntaxe CSS | Description du sélecteur CSS |
|---|---|
h2:empty {} | Permet de sélectionner un élément H2 qui n’a pas d’enfant. |
h2:lang(fr) {} | Permet de sélectionner tous les éléments H2 qui ont l’attribut « lang » égal à « fr ». |
*:not(h2) {} | Permet de sélectionner tous les éléments qui ne sont pas des H2. |
p:only-child {} | Permet de sélectionner tous les éléments H2 qui sont les seuls enfants de leurs parents. |
