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: <h1>Les selecteurs de type</h1>

<p>paragraphe 1</p>

<p>paragraphe 2</p>

css: p{text-decoration: underline;}

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: <h1 class="cl1">selecteur de classe</h1>

<p class="cl2">1er pharagraphe</p>

<p>2eme paragraphe</p>

css: .cl1{text-decoration: underline;}

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: <h1>selecteur d'identifiant</h1>

<p id="para1">1er paragraphe</p>

<p id="para2">2eme paragraphe</p>

css: #para2{text-decoration: underline;}

Navigateur:

Les sélecteurs universel:

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

Html: <h1>selecteur universelle</h1>

<p>1er pharagraphe</p>

<p>2eme paragraphe</p>

css: *{text-decoration: underline;}

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: <h1 class="cl1">selecteur d'attribut</h1>

<p class="cl2">1er pharagraphe</p>

<p class="cl2">2eme paragraphe</p>

<p >3eme paragraphe</p>

css: [class]{text-decoration: underline;}

Navigateur:

[attribut=”valeur”]

Html: <h1 >selecteur d'attribut=</h1>

<p class="cl1">1er pharagraphe</p>

<p class="cl2">2eme paragraphe</p>

css: [class="cl2"]{text-decoration: underline;}

Navigateur:

[attribut^=”valeur”]

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

Html: <h1>selecteur attribut^=</h1>

<p class="html">html</p>

<p class="css">Cascading Style Sheets</p>

<p class="javascript">javascript</p>

css: [class^="ht"]{text-decoration: underline;}

Navigateur:

[attribut$=”valeur”]

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

Html: <h1>selecteur attribut$=</h1>

<p class="html">html</p>

<p class="css">Cascading Style Sheets</p

css: [class$="ss"]{text-decoration: underline;}

Navigateur:

[attribut*=valeur]

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

Html: <h1>selecteur attribut*=</h1>

<p class="html">html</p>

<p class="css">Cascading Style Sheets</p>

<p class="javascript">javascript</p>

css: [class*="vas"]{text-decoration: underline;}

Navigateur:

[attribut~=”valeur”]

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

Html: <h1>selecteur attribut~=</h1>

<p class="html">html css</p>

 <p class="langage de programmation">javascript python C++</p>

css: [class~="langage"]{text-decoration: underline;}

Navigateur:

[attribut=”valeur” i]

Html: <h1>selecteur attribut i=</h1>

<p class="hTmL">html</p>

<p class="css">css</p>

css: [class="HTml"i]{text-decoration: underline;}

[class="CsS"i]{text-decoration: overline;}

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: <h1>test</h1>

<p>1er paragraphe voisin direct</p>

<p>2eme paragraphe</p>

<p>3eme paragraphe</p>

css: h1+p{text-decoration: underline;}

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: <div>

<p>1er paragraphe</p>

<p>2eme paragraphe</p>

</div>

<p>3eme paragraphe</p>

css: div~p{text-decoration: underline;}

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: <div>

<p>1er paragraphe</p>

<p>2eme paragraphe</p>

</div>

<p>3eme paragraphe</p>

css: div>p{text-decoration: underline;}

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: <div>

<h1>title</h1>

<h2>test1</h2>

<p>paragraphe</p>

</div>

<h2>test2</h2>

css: div h2{text-decoration: underline;}

Navigateur: