Sélecteurs CSS

Un sélecteur est un ensemble de mots-clés et/ou de symboles . Il permet

d'identifier les éléments qui vont profiter du style CSS. Le tableau ci-dessous
rassemble quelques sélecteurs

Sélecteur Exemple Description de l’ exemple CSS

.class .intro Sélectionne tout élément avec class="intro" 1

#id #nom Sélectionne l’élément avec id="nom" 1

* * étoile cible tous les éléments de la page 2

élément p Sélectionne tous les éléments <p> 1

élement,élément div,p Sélectionne tous les éléments <div> et tous les éléments <p> 1

élément élément div p Sélectionne tous les éléments <p> placé dans l’élément <div> 1

élément>élément div>p Sélectionne tous les éléments <p> dont l’élément <div> est parent 2

élément + élément div+p Sélectionne l’ élément <p> placé juste après l’élément<div> 2

:link a:link Sélectionne tous les liens non visités 1

a:visited Sélectionne tous les liens visités 1

:active a:active Sélectionne tous les liens actifs 1

a:hover Sélectionne tous les liens de survol 1

:focus input:focus Sélectionne l’élément input avec 2

::first-letter p ::first-letter Sélectionne la première lettre de chaque<p> 1

 Sélecteur Exemple Description de l’exemple CSS

::first-line p::first-line Sélectionne la première ligne de chaque<p> 1

:first-child p:first-child Sélectionne l’élément<p> qui est le premier enfant de son 2

parent

: :before p::before Cette pseudo est associée à la propriété content, permet 2

d’insérer un contenu avant chaque élément p par exemple .

:: after p::after Cette pseudo est associée à la propriété content, permet 2

d’insérer un contenu après chaque élément p par exemple .

element1~element2 p~ul Sélectionne tous les éléments <ul>qui sont précédés d'un 3
élément <p>

[attribue] [class] Sélectionne tous les éléments dont l’attribut est class 2

[attribue=value] [title=fleur] Sélectionne tous les éléments dont l’attribut title=fleur 2

[attribue~=value] [title~=lien vers google] Sélectionne tous les éléments dont l’attribut title contient 2
le mot "google"

[attribut|=value] [lang|=fr] Sélectionne tous les éléments dont la valeur de l'attribut 2

lang commençant par « fr »

:-child p:only-child Sélectionne le <p> qui est le seul enfant de son parent 3

: nth-child ( n ) p: nth-child (2) Sélectionne tous les éléments <p> qui est le deuxième 3
enfant de son parent