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.
Sélecteurs CSS : C'est quoi et comment les utiliser
Un sélecteur CSS est un code qui permet d'identifier les éléments HTML sur lesquels les styles CSS seront appliqués. Il peut être utilisé pour cibler des éléments spécifiques tels que les balises HTML, les classes ou les identifiants.
Les sélecteurs CSS sont essentiels pour appliquer des styles à des éléments spécifiques d'une page web. Ils permettent aux développeurs web de personnaliser l'apparence de leur site, de créer des effets visuels, d'organiser le contenu et bien plus encore.
Voici quelques exemples de sélecteurs CSS couramment utilisés :
- Sélecteur de balise : cible toutes les balises HTML d'un type particulier, comme "h1" pour les titres de niveau 1.
- Sélecteur de classe : cible tous les éléments ayant une classe particulière, comme ".my-class" pour les éléments ayant la classe "my-class".
- Sélecteur d'identifiant : cible un élément HTML ayant un identifiant spécifique, comme "#mon-id" pour l'élément ayant l'identifiant "mon-id".
- Sélecteurs combinés : Les sélecteurs CSS peuvent également être combinés pour cibler des éléments plus spécifiques. Par exemple, ".my-class h1" ciblerait tous les titres de niveau 1 à l'intérieur d'éléments ayant la classe "my-class".
Pour utiliser les sélecteurs CSS, il faut les ajouter dans un ou plusieurs fichiers CSS et les lier à la page HTML, ou les inclure directement dans la balise "head", à l'intérieur du'un balise "style". Les styles seront alors appliqués aux éléments HTML correspondants.
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 à 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::after {} | Permet de cibler le psedo-élément situé aprés l'élément. Pour que ce pseudo élément existe, vous devez lui donner une propriété "content" comme suit : content: "Hello"; |
a::before{} | Permet de cibler le psedo-élément situé avant l'élément. Pour que ce pseudo élément existe, vous devez lui donner une propriété "content" comme suit : content: "Hello"; |
a::first-letter{} | Permet de cibler la première lettre |
p::first-line {} | Permet de cibler la première ligne |
body::selection {} | Permet de cibler la selection qui apparaît quand l'utilisateur sélectionne du texte ou des éléments avec un pointeur (souris) ou via un écran tactile. |
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. |
