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. |
