Les sélecteurs Css - Les cours Css

Les sélecteurs Css

Introduction aux sélecteurs Css

Après les cours sur les règles principales Css, vous pouvez aller plus loin dans la manière de cibler les éléments (X)HTML.
Ce cours Css sur les sélecteurs Css récapitule l'ensemble des sélecteurs Css ainsi que leur compatibilité avec les navigateurs.

Sachez que vous pouvez combiner les sélecteurs Css.

Sélecteur Css universel

Qu'est-ce que le sélecteur css * ou sélecteur universel?

Le sélecteur Css s'écrit *, il sélectionne tous les éléments.

Code HTML pour l'exemple du sélecteur Css universel :
<p>
  <span>
    <b>sélecteur <b><b>Css</b> universel</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>Css</b> universel</b></b>
  </span>
</p>

Dans l'exemple suivant, nous ciblons toutes les balises.

Exemple de code CSS du sélecteur universel:
*{font-weight:normal;}

Dans l'exemple suivant, nous ciblons toutes les balises ayant pour classe "maclasse".

Exemple de code CSS du sélecteur universel :
*.maclasse{font-weight:normal;} /* ne pas faire */
/* est équivalent à */
.maclasse{font-weight:normal;}

Dans l'exemple suivant, nous ciblons toutes les balises contenues dans la balise ayant pour classe "maclasse".

Exemple de code CSS du sélecteur universel :
.maclasse *{font-weight:normal;}

Compatibilité navigateur et remarques

Le sélecteur Css universel est reconnu par tous les navigateurs.
Le sélecteur Css universel est à éviter car il prend plus de temps dans les performances de rendu.
N'accolez jamais le sélecteur Css universel , à une classe, un id, un pseudo-classe ou un pseudo-élément.

Exemple d'écriture du sélecteur universel à ne pas faire :
*.maclasse { }
*#monid {}
*:first-line{}
etc...

Sélecteur Css de type

Qu'est-ce qu'un sélecteur Css de balise?

Le sélecteur Css de type permet de sélectionner un type de balise (x)HTML précis.
Le sélecteur Css de balise s'écrit en mettant le nom de la balise (X)HTML.

Code HTML pour l'exemple de sélecteur Css de type :
<p>
  <span>
    <b>sélecteur <b><b>Css</b> de balise</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>Css</b> de balise</b></b>
  </span>
</p>

Dans l'exemple suivant, nous ciblons toutes les balises B.

Exemple de code CSS du sélecteur par nom de balise :
b{ font-weight : normal; }

Dans l'exemple suivant, nous ciblons toutes les balises B contenu dans une balise B ayant comme classe "maclasse".

Exemple de code CSS du sélecteur par nom de balise :
b.maclasse{ font-weight : normal; }

Compatibilité navigateur du sélecteur Css de balise

Le sélecteur Css par type (ou sélecteur Css par balise) est reconnu par tous les navigateurs.

Sélecteur Css d'id

Qu'est-ce qu'un sélecteur Css d'id?

Le sélecteur Css d'id permet de sélectionner une balise par la valeur de son attribut id (je précise que la valeur de l'id est unique dans votre page HTML).
Le sélecteur Css d'id s'écrit #VALEUR_DE_ID

Code HTML pour l'exemple de sélecteur Css d'id :
<p>
  <span id="id_selecteurA">
    <b>sélecteur <b><b class="classe_selecteurB">Css</b> d'id</b></b>
  </span>
  <br/>
  <span id="id_selecteurB">
    <b class="maclasse">sélecteur <b class="classe_selecteurB"><b>Css</b> d'id</b></b>
  </span>
</p>

Dans l'exemple suivant, nous ciblons la balise ayant comme id "id_selecteurA".

Exemple de code CSS du sélecteur par attribut id :
 #id_selecteurA{font-weight:normal;}

Dans l'exemple suivant, nous ciblons la balise ayant comme classe "classe_selecteurB" et qui est contenu dans une balise dont la valeur de l'id est "id_selecteurB".

Exemple de code CSS du sélecteur par attribut id :
#id_selecteurB b.classe_selecteurB{font-weight:normal;}

Compatibilité navigateur et remarques

Le sélecteur Css d'id est reconnu par tous les navigateurs.
Evitez d'accoler au sélecteur Css d'id CSS une balise ou un chemin de sélection, car je le rappelle l'id est unique dans votre page.

Exemple d'écriture du sélecteur d'id à ne pas faire :
div > p #monid{}
p#monid {}

Cependant, l'écriture n'est pas forcément fausse dans le cas où vous avez un feuille de style commune à plusieurs pages, et un id identique dans chaque page qui doit avoir une charte différente.

Sélecteurs Css de classe

Qu'est-ce qu'un sélecteur Css de classe?

Le sélecteur CSS de classe permet de sélectionner une balise en fonction d'un "identifiant de class" présent dans son attribut class.
Le sélecteur Css de classe s'écrit .VALEUR_DE_CLASSE

Code HTML pour l'exemple de sélecteur par attribut class :
<p>
  <span id="id_selecteurA">
    <b>sélecteur <b><span class="classe_selecteurB">css</span> de classe</b></b>
  </span>
  <br/>
  <span id="id_selecteurB">
    <b class="maclasse">sélecteur <b class="classe_selecteurB autre_class"><b>css</b> de classe</b></b>
  </span>
</p>

Dans l'exemple suivant, nous ciblons la balise ayant comme class "classe_selecteurB".

Exemple de code CSS du sélecteur par attribut class :
.classe_selecteurB{ color : red; }

Dans l'exemple suivant, nous ciblons la balise B ayant comme class "classe_selecteurB".
Code CSS de sélecteur de classe :

Exemple de code CSS du sélecteur par attribut class :
b.classe_selecteurB{ color : red; }

Compatibilité navigateur du sélecteur Css de classe

Le sélecteur Css de classe est reconnu par tous les navigateurs.

Sélecteur Css descendant

Qu'est-ce qu'un sélecteur Css descendant?

Le sélecteur CSS descendant permet de sélectionner un ou des enfants directs ou indirects.
Le sélecteur CSS descendant s'écrit : X Y.
- X : un des types de sélecteur Css, qui représente le parent.
- Y : un des types de sélecteur Css, qui représente l'enfant direct ou indirect de X.
Soit sélectionne tous les éléments Y contenu dans élément X.

Code HTML pour l'exemple de sélecteur Css descendant :
<p>
  <span>
    <b>sélecteur <b><b>Css</b> descendant</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>Css</b> descendant</b></b>
  </span>
</p>

Dans l'exemple suivant, nous sélectionnons toutes les balises B contenues dans la balise P :

Exemple de code CSS du sélecteur descendant :
p b{ font-weight : normal; }

Dans l'exemple suivant, nous ciblons plus précisément, nous sélectionnons toutes les balises B contenues dans la balise B ayant comme classe "maclasse" qui elle-même est contenue dans une balise SPAN qui elle-même est contenue dans une balise P :

Exemple de code CSS du sélecteur descendant :
p span b.maclasse b{ font-weight : normal; }

Compatibilité navigateur du sélecteur Css descendant

Le sélecteur Css descendant est reconnu par tous les navigateurs.

Sélecteur Css d'enfants directs

Qu'est-ce qu'un sélecteur Css d'enfant?

Le sélecteur Css d'enfant permet de sélectionner l'enfant direct.
Le sélecteur Css d'enfant s'écrit : X > Y.
- X : un des types de sélecteur Css, qui représente le parent.
- Y : un des types de sélecteur Css, qui représente l'enfant direct de X à sélectionner.

Dans l'exemple suivant, la balise "B" contenant "css" n'est pas prise en compte puisqu'elle n'est pas l'enfant direct de "P" mais l'enfant direct de "B"

Code HTML pour l'exemple de sélecteur Css d'enfants directs :
<p>
  <b>sélecteur <b>css</b> d'enfant</b>
</p>

Exemple de code CSS du sélecteur d'enfant :
p > b{ font-weight : normal; }

Dans l'exemple suivant, nous ciblons les enfants directs de type SPAN qui ont comme enfants directs une balise B de classe "maclasse" qui elle-même a comme enfant direct une balise B.

Code HTML pour l'exemple du sélecteur d'enfant :
<p>
  <span>
    <b>sélecteur <b><b>css</b> d'enfant</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur <b><b>css</b> d'enfant</b></b>
  </span>
</p>

Exemple de code CSS du sélecteur d'enfant :
p > span > b.maclasse > b{ font-weight : normal; }

Compatibilité navigateur du sélecteur Css d'enfants directs

Le sélecteur Css d'enfant est reconnu par tous les navigateurs sauf Internet Explorer 6.

Sélecteur Css adjacent

Qu'est-ce que le sélecteur Css + adjacent?

Le sélecteur CSS "+" adjacent permet de sélectionner l'élément placé immédiatement après un autre élément.
Le sélecteur CSS "+" adjacent s'écrit : X + Y.

  • X : un des types de sélecteur Css, représente l'élément qui doit précéder immédiatement Y.
  • Y : un des types de sélecteur Css, représente l'élément cible.

Code HTML pour l'exemple de sélecteur Css adjacent :
<p>
    <u>Sélecteur +</u> <b>css adjacent</b>
    <u>Sélecteur +</u> <i>css</i> <b>adjacent</b>
  <span>
    <u>Sélecteur +</u> <i>css</i> <b>adjacent</b>
  </span>
</p>

Dans l'exemple suivant, nous ciblons la balise B adjacente à une balise U.

Exemple de code CSS du sélecteur + :
U + B { color : red; }

Exemple de sélecteur Css adjacent :

Sélecteur + css adjacent
Sélecteur + css adjacent Sélecteur + css adjacent
Sélecteur + css adjacent

Exemple de sélecteur Css adjacent

Dans l'exemple suivant, nous ciblons la balise B adjacente à une balise U contenue dans une balise SPAN, elle-même contenue dans une balise P.

Exemple de code CSS du sélecteur + :
P SPAN U + B { color : red;}

Exemple de sélecteur Css adjacent :

Sélecteur + css adjacent
Sélecteur + css adjacent Sélecteur + css adjacent
Sélecteur + css adjacent

Exemple de sélecteur Css adjacent

Compatibilité navigateur du sélecteur Css adjacent

Le sélecteur Css adjacent est reconnu par tous les navigateurs, sauf par Internet Explorer 6 et inférieure

Sélecteur Css précédé par

Qu'est-ce que le sélecteur Css ~?

Le sélecteur Css ~ permet de sélectionner tous les éléments Y qui sont situés après l'élément X et ayant le même parent.
Le sélecteur Css ~ s'écrit : X ~ Y.
- X : un des types de sélecteur Css, représente l'élément qui doit précéder Y.
- Y : un des types de sélecteur Css, représente l'élément ciblé.

Code HTML pour l'exemple de sélecteur Css précédé par :
<p>
  <span>
    <u>Sélecteur ~</u> <b>CSS :</b> <u>je suis après,</u> <u>je suis après mois aussi</u>
    <br>
    <u>Sélecteur ~</u> <b>CSS :</b> <u>je suis après,</u> <u>je suis après mois aussi</u>
  </span>
</p>

Dans l'exemple suivant, nous ciblons toutes les balises U situées après une balise B.

Exemple de code CSS ~ :
b ~ u { color : red; }

Exemple de sélecteur Css précédé par :

sélecteur ~ CSS : je suis après, je suis après mois aussi
sélecteur ~ CSS : je suis après, je suis après mois aussi

Exemple de code CSS ~

Compatibilité navigateur du sélecteur Css précédé par

Le sélecteur CSS ~ est reconnu par tous les navigateurs sauf par Internet Explorer < 7, Safari < 3 et Opera < 9.

Sélecteur Css d'attribut

Qu'est-ce qu'un sélecteur Css d'attribut?

Le sélecteur Css d'attribut permet de sélectionner un balise (X)HTML en fonction de ses attributs et des valeurs de ses attributs. Vous pouvez juxtaposer plusieurs sélecteurs Css d'attribut.

Le sélecteur Css d'attribut permet peut prendre plusieurs valeurs :

  • , sélectionne l'élément A ayant comme attribut "attribut" quelle soit sa valeur.
  • [attribut=valeur], sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur est égale à "valeur".
  • [attribut~=valeur], sélectionne l'élément ayant comme attribut "attribut" et dont la valeur est une liste de valeurs séparées par des espaces et dont une de ses valeurs est égale à "valeur".
  • [attribut|=valeur], sélectionne l'élément ayant comme attribut "attribut" et dont la valeur est une liste de valeurs séparées par des espaces et dont la première de ses valeurs est égale à "valeur" immédiatement suivi d'un tiret (U+002D) soit "valeur-" ou si sa valeur est exactement égale à "valeur".
  • [attribut$=valeur], sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur se termine par "valeur".
  • [attribut^=valeur], sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur commence par "valeur".
  • [attribut*=valeur], sélectionne l'élément ayant comme attribut "attribut" et dont sa valeur contient la chaine "valeur".
Code HTML pour les exemples :
<p>
  <span>
    <b id="unid">sélecteur <b><b title="Feuille de style" lang="fr">css</b> d'attribut html</b></b>
  </span>
  <br/>
  <span>
    <b class="maclasse">sélecteur</b> <b lang="en">css</b> <b>d'attribut html</b>
  </span>
</p>

Dans l'exemple suivant, nous ciblons toutes les balises ayant un attribut lang .

Exemple de code CSS de sélecteur d'attribut :
 [lang]{ color : red; }

Exemple de sélecteur d'attribut :

sélecteur css d'attribut html
sélecteur css d'attribut html

Exemple de sélecteur Css d'attribut

Dans l'exemple suivant, nous ciblons toutes les balises ayant un attribut lang=fr.

Exemple de code CSS de sélecteur d'attribut :
 [lang='fr']{ color : red; }

Exemple de sélecteur d'attribut :

sélecteur css d'attribut html
sélecteur css d'attribut html

Exemple de sélecteur Css d'attribut

Dans l'exemple suivant, nous ciblons toutes les balises ayant un attribut class comportant "ma".

Exemple de code CSS de sélecteur d'attribut :
[class*='ma']{ color : red; }

Exemple de sélecteur Css d'attribut :

sélecteur css d'attribut html
sélecteur css d'attribut html

Exemple de sélecteur Css d'attribut

Compatibilité navigateur du sélecteur Css d'attribut

Le sélecteur Css d'attribut est reconnu par tous les navigateurs, sauf par Internet Explorer <= 6, Opera < 9 et Safari < 3

Sélecteur Css de négation

Qu'est-ce qu'un sélecteur Css de négation?

Le sélecteur Css permet d'exclure d'un ou plusieurs éléments du ciblage. Pour cela, vous devez utiliser le sélecteur d'exclusion Css.

Code HTML pour les exemples :
<ol>
  <li class="widget wdg-1">widget 1</li> 
  <li class="widget wdg-2">widget 2</li> 
  <li class="widget wdg-3">widget 3</li> 
</ol>

Dans l'exemple suivant, nous ciblons toutes les classes widget saut wdg-2 .

Exemple de code CSS :not() :
.widget:not(.wdg-2){ border : 1px solid red }
Exemple de sélecteur de négation :
  1. widget 1
  2. widget 2
  3. widget 3

Copie d'écran :

Compatibilité navigateur du sélecteur Css de négation

Le sélecteur Css de négation est reconnu par tous les navigateurs les nouveaux navigateurs (> 2010)

Sélecteur Css du premier fils

Qu'est-ce qu'un sélecteur Css de premier fils?

Le sélecteur CSS sélectionner toutes les premières balises fille.

Code HTML pour les exemples :
<ul>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
    <span><b>Element</b><sub>indice</sub></span>
  </li>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
  </li>
  <li>
    <span>Element seul</span>
  </li>
</ul>

Dans l'exemple suivant, nous ciblons toutes les premières balises filles de UL.

Exemple de code CSS :first-child :
ul :first-child{ text-decoration : underline; }

Exemple de sélecteur Css :first-child :

  • ElementcarreElementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :first-child

Dans l'exemple suivant, nous ciblons toutes les premières balises filles directes de UL.

Exemple de code CSS :first-child :
ul > :first-child{ text-decoration : underline; }

Exemple de sélecteur Css :first-child :

  • ElementcarreElementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :first-child

Dans l'exemple suivant, nous ciblons toutes les premières balises filles de type SPAN de UL.

Exemple de code CSS :first-child :
ul span:first-child{ text-decoration : underline; }

Exemple de sélecteur Css :first-child :

  • ElementcarreElementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :first-child

Sélecteur Css du dernier fils

Qu'est-ce qu'un sélecteur Css de dernier fils?

Le sélecteur CSS permet de sélectionner la dernière balise fille.

Code HTML pour les exemples :
<ul>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
    <span><b>Element</b><sub>indice</sub></span>
  </li>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
  </li>
  <li>
    <span>Element seul</span>
  </li>
</ul>

Dans l'exemple suivant, nous ciblons toutes les dernières balises filles de UL.

Exemple de code CSS :last-child :
ul :last-child{ text-decoration : underline; }

Exemple de sélecteur Css :last-child :

  • ElementcarreElementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :last-child

Dans l'exemple suivant, nous ciblons toutes les dernières balises filles directes de UL.

Exemple de code CSS :last-child :
ul > :last-child{ text-decoration : underline; }

Exemple de sélecteur Css :last-child :

  • ElementcarreElementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :last-child

Dans l'exemple suivant, nous ciblons toutes les dernières balises filles de type SPAN de UL.

Exemple de code CSS :last-child :
ul span:last-child{ text-decoration : underline; }

Exemple de sélecteur Css :last-child :

  • ElementcarreElementindice
  • Elementcarre
  • Element seul
Exemple de sélecteur Css :last-child

Sélecteur Css pseudo-classe

Qu'est-ce qu'un sélecteur Css pseudo-classe?

Le sélecteur Css pseudo-classe permet de sélectionner un balise (X)HTML sur des caractéristiques autres que leur nom, les attributs ou le contenu. Par exemple en fonction d'une "action" ou "état".
first-child et lang() sont des exceptions.
Dans les sélecteurs Css pseudo-classe vous avez entre autre :

La pseudo-classe peut être mise n'importe où dans le chemin de sélection.

Compatibilité navigateur du sélecteur Css pseudo-classe

La compatibilité de chaque pseudo-classe CSS est décrite dans leur définition.

Sélecteur Css de première lettre

Qu'est-ce qu'un sélecteur Css de première lettre?

Le sélecteur CSS permet de sélectionner la première lettre du contenu texte d'une balise.

Code HTML pour les exemples :
<ul>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
    <span><b>Element</b><sub>indice</sub></span>
  </li>
  <li>
    <span><b>Element</b><sup>carre</sup></span>
  </li>
  <li>
    <span>Element seul</span>
  </li>
</ul>

Dans l'exemple suivant, nous ciblons toutes les premières lignes dans UL.

Exemple de code CSS :first-letter :
ul :first-letter{ color : red; }
ul:first-letter{ color : red; }
ul li:first-letter{ color : red; }

Exemple de sélecteur Css :first-letter :

  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
Exemple de sélecteur Css :first-line

Sélecteur Css de première ligne

Qu'est-ce qu'un sélecteur Css de première ligne?

Le sélecteur CSS permet de sélectionner la première ligne de texte du contenu d'une balise.

Code HTML pour les exemples :
<p>Post emensos insuperabilis expeditionis event....</p>
<ul>
  <li>Elément LI 1<br>Elément LI 2</li>
  <li>Elément LI<br><p>Elément P<br>Elément2 P<p></li>
  <li>Elément LI</li>
</ul>

Dans l'exemple suivant, nous ciblons toutes les premières lignes dans UL.

Exemple de code CSS :first-line:
ul :first-line{ color : red; }

Exemple de sélecteur Css :first-line :

  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI
Exemple de sélecteur Css :first-line

Dans l'exemple suivant, nous ciblons la première ligne du UL et P.
Vous remarquez que le UL n'a pas de première ligne.

Exemple de code CSS :first-line :
ul:first-line{ color : red; }
p:first-line{ color : red; }

Exemple de sélecteur Css :first-line :

  • Elément LI 1
    Elément LI 2
  • Elément LI

    Elément P
    Elément2 P

  • Elément LI

Post emensos insuperabilis expeditionis eventus languentibus partium animis, quas periculorum varietas fregerat et laborum, nondum tubarum cessante clangore vel milite locato per stationes

Exemple de sélecteur Css :first-line

Sélecteur Css pseudo-élément

Qu'est qu'un sélecteur Css pseudo-élément?

Le sélecteur Css pseudo-élément permet de sélectionner des "parties de code" qui ne sont pas disponibles en tant que nœuds dans l'arbre du document.
Dans les sélecteurs Css pseudo-élément vous avez :

  • , qui sélectionne la première ligne d'un élément HTML,
  • , qui sélectionne la première lettre d'un élément HTML,
  • , qui permet d'insérer du contenu CSS au début d'un élément HTML,
  • , qui permet d'insérer du contenu CSS à la fin d'un élément HTML,
  • , qui sélectionne la valeur affichée de l'attribut placeholder dans un élément de formulaire.
  • , qui permet de cibler le texte sélectionné par l'utilisateur.
Le pseudo-élément ne peut être mis qu'en fin de chemin de sélection.

Compatibilité navigateur du sélecteur Css pseudo-élément

La compatibilité de chaque pseudo-élément CSS est décrite dans leur définition.

Comment faire des sélecteurs performants

Introduction

L'optimisation css des sélecteurs n'a pas vraiment d'incidence sur des petites pages, mais plus vous aurez de balises imbriquées avec des grandes profondeurs de fils, plus vous aurez intérêt à faire de l'optimisation des sélecteurs CSS
Ce chapitre est plus là à titre d'information.
Après lecture, vous constaterez que certains exemples précédents ne sont pas optimisés. C'est normal, ils sont là pour vous permettre de comprendre le fonctionnement des sélecteurs CSS.

Catégories de règles

Maintenant que vous avec compris les différents sélecteurs, vous devez savoir que les sélecteurs CSS sont séparés en quatre catégories :

  • 1 - chemin d'identifiant,
  • 2 - chemin de classe,
  • 3 - chemin de balise,
  • 4 - chemin universel.

La performance d'attribution des règles CSS décroit suivant le chemin d'assignation. Chemin d'identifiant est plus performant que le chemin universel.

Exemple de chemin d'identifiant :
#monid {}
#monid[type="autocomplete"] { }
div > span > a#monid:active { }

Exemple de chemin de classe :
span.maclass { } 
.maclass { }
form > .maclass[checked="true"] { }

Exemple de chemin de balise :
td { }
table > td { }  
input[type="checkbox"] { } 

Exemple de chemin universel :
[hidden="true"] { }
* {…}
table > [collapsed="true"] { }

Assignation d'une règle par le navigateur

Les navigateurs lisent les sélecteurs CSS de droite à gauche.
Donc si nous avons le sélecteur suivant div div > span a[title="home"], le premier élément traité sera a[title="home"]. Puis le navigateur remonte progressivement pour chercher un parent direct ou indirect SPAN, puis il vérifie que ce dernier est l'enfant direct d'un DIV, etc...

Donc dans la plupart des cas, évitez des chemins de sélection trop longs.