Les selecteurs CSS

Les selecteurs simples

Les sélecteurs de type :
Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.

Html:

css:

Navigateur:
Les sélecteurs de classe :
Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur
attribu class

Html:

css:

Navigateur:
Les sélecteurs d'identifiant:

Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur

de son attribut id

Html:

css:

Navigateur:

Les sélecteurs universel:

Ce sélecteur permet de cibler tous les nœuds d'un document.

Html:

css:

Navigateur:
Les sélecteurs d’attribut:
Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la
valeur d'un de leurs attributs.
[attribut]

Html:

css:

Navigateur:

[attribut=”valeur”]

Html:
css:
Navigateur:

[attribut^=”valeur”]

Sélectionne tout élément <p> possédant un attribut ‘’class” dont la valeur commence exactement
par «ht»

Html:
css:
Navigateur:

[attribut$=”valeur”]

Sélectionne tout élément <p> possédant un attribut ‘’class” dont la valeur se termine exactement
par « ipt »
Html:
css:
Navigateur:

[attribut*=valeur]

Sélectionne tout élément <p> possédant un attribut ‘’class” dont la valeur contient la valeur « ty
»

Html:
css:
Navigateur:

[attribut~=”valeur”]

Permet de cibler un élément qui possède un attribut ‘’class” dont la valeur est
"selecteur"

Html:
css:
Navigateur:

[attribut=”valeur” i]

Html:
css:
Navigateur:

Les combinateurs
Les sélecteurs de voisin direct:
Le combinateur '+' permet de sélectionner les nœuds qui suivent immédiatement un
élément donné.

Html:
css:
Navigateur:
Les sélecteurs de voisins:
Le combinateur '~' permet de sélectionner les nœuds qui suivent un élément et qui ont
le même parent.

Html:

css:

Navigateur:
Les sélecteurs d’ éléments enfants:

Le combinateur '>' permet de sélectionner les nœuds qui sont des enfants directs d'un
élément donné.

Html:

css:
Navigateur:

Les sélecteurs d’ éléments descendants:

Le combinateur " " (espace) permet de sélectionner les nœuds qui sont des descendants
(pas nécessairement des enfants directs) d'un élément donné.

Html:

css:

Navigateur: