CSS 🦄 Tous les sélecteurs avec exemples et explications

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.