Les sélecteurs Css - Les cours Css

Les 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 universel 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

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

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

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 :

[attribut], 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

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

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

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 :not() 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 :

widget 1
widget 2
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 :first-child 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 :

Element^carreElement_indice
Element^carre
Element seul

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 :

Element^carreElement_indice
Element^carre
Element seul

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 :

Element^carreElement_indice
Element^carre
Element seul

Sélecteur Css du dernier fils

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

Le sélecteur CSS :last-child 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 :

Element^carreElement_indice
Element^carre
Element seul

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 :

Element^carreElement_indice
Element^carre
Element seul

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 :

Element^carreElement_indice
Element^carre
Element seul

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 :

:not(), exprime la négation,
:link, état d'un lien non visité, voir Gestion des liens en Css,
:visited, état d'un lien visité,
:hover, état d'un élément survolé avec la souris,
:focus, état d'un élément qui a le focus,
:active, état d'un élément qui est activé.
:target, état d'un élément qui est ciblé par l'ancre présente dans l'url.
:lang, élément dont la langue est par exemple fr -> lang(fr).
:first-child, premier fils d'un élément.
:last-child, dernier fils d'un élément.
:nth-child et :nth-last-child, les n-ième enfants d'un élément.
:nth-last-child et :nth-last-child, les n-ième enfants en commençant par la fin d'un élément.
:nth-of-type et :nth-last-of-type, les n-ième enfants de même type d'un élément.
:nth-last-of-type et :nth-last-of-type, les n-ième enfants de même type d'un élément en commençant par la fin.
:only-child et :only-of-type permet de cibler les fils de type uniques.

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 :first-letter 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

Sélecteur Css de première ligne

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

Le sélecteur CSS :first-line 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

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

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 nuds dans l'arbre du document.
Dans les sélecteurs Css pseudo-élément vous avez :

:first-line, qui sélectionne la première ligne d'un élément HTML,
:first-letter, qui sélectionne la première lettre d'un élément HTML,
:after, qui permet d'insérer du contenu CSS au début d'un élément HTML,
:before, qui permet d'insérer du contenu CSS à la fin d'un élément HTML,
::placeholder, qui sélectionne la valeur affichée de l'attribut placeholder dans un élément de formulaire.
::selection, 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.

Définitions annexes

Définitions CSS annexes

::placeholder: Le pseudo-élément CSS : ::PLACEHOLDER permet de cibler le texte de remplacement spécifié par l'attribut placeholder d'un élément. Exemple d'écriture CSS...[ ::placeholder ]
::selection: Le pseudo-élément CSS : ::SELECTION permet de cibler le texte sélectionné par l'utilisateur.Exemple d'écriture CSS de ::selection ::selection { /* Propr...[ ::selection ]
:active: La pseudo-classe d'action CSS :ACTIVE permet d'assigner des propriétés CSS à un élément HTML durant le moment où l'internaute clique sur ce dernier av...[ :active ]
:after: Le pseudo-élément CSS :AFTER de spécifier qu'un "contenu CSS" sera inséré à la fin du contenu d'un élément (x)HTML ou d'assigner à ce "contenu CSS" de...[ :after ]
:before: Le pseudo-élément CSS :BEFORE permet de spécifier qu'un "contenu CSS" sera inséré avant le contenu d'un élément (X)HTML et d'assigner à ce "contenu CS...[ :before ]
:first-child: La pseudo-classe CSS :FIRST-CHILD permet de cibler le premier fils d'un élément HTML afin de lui assigner des propriétés CSS.Exemple d'écriture CSS de...[ :first-child ]
:first-letter: Le pseudo-élément CSS :FIRST-LETTER permet de spécifier des propriétés CSS pour la première lettre d'un élément dit de type bloc et si elle est précéd...[ :first-letter ]
:first-line: Le pseudo-élément CSS :FIRST-LINE permet de spécifier les propriétés CSS de la première ligne d'un élément HTML.Exemple d'écriture CSS de :first-line ...[ :first-line ]
:focus: La pseudo-classe d'action CSS :FOCUS permet d'assigner des propriétés CSS à un élément HTML qui accepte le focus et à ses fils durant le moment où il ...[ :focus ]
:hover: La pseudo-classe d'action CSS :HOVER permet d'assigner des propriétés CSS à un élément HTML et à ses fils durant le moment où il est survolé par le cu...[ :hover ]
:lang: La pseudo-classe CSS :LANG permet de cibler un élément HTML en fonction de sa langue afin de lui assigner des propriétés CSS.Exemple d'écriture CSS ...[ :lang ]
:last-child: La pseudo-classe CSS :LAST-CHILD permet de cibler le dernier fils d'un élément HTML ou XHTML afin de lui assigner des propriétés CSS.Exemple d'écritur...[ :last-child ]
:link: La pseudo-classe CSS :LINK permet d'assigner des propriétés CSS à tous les liens (A) qui n'ont pas été visités et à ses fils.Exemple d'écriture CSS :l...[ :link ]
:not: La pseudo-classe de négation CSS :NOT permet de spécifier des règles d'exclusion d'un ou plusieurs éléments à exclure du ciblage. Exemple d'écriture...[ :not ]
:nth-child: La pseudo-classe CSS :NTH-CHILD permet de cibler tous les n-ième enfants dans la liste des enfants directs d'un même élément parent, afin de leur as...[ :nth-child ]
:nth-last-child: La pseudo-classe CSS :NTH-LAST-CHILD permet de cibler tous les n-ième enfants dans la liste des enfants directs d'un même élément parent afin de leu...[ :nth-last-child ]
:nth-last-of-type: La pseudo-classe CSS :NTH-LAST-OF-TYPE permet de cibler tous les n-ième enfants de chaque liste d'enfants directs de même type (span, b, div, etc.) ...[ :nth-last-of-type ]
:nth-of-type: La pseudo-classe CSS :NTH-OF-TYPE permet de cibler tous les n-ième enfants de chaque liste d'enfants directs de même type (span, b, div, etc.) d'un ...[ :nth-of-type ]
:only-child: La pseudo-classe CSS :ONLY-CHILD permet de cibler tous les enfants qui sont le seul élément dans leur élément parent, afin de lui assigner des proprié...[ :only-child ]
:only-of-type: La pseudo-classe CSS :ONLY-OF-TYPE permet de cibler tous les enfants qui sont le seul élément de son type (span, b, div, etc.) dans la liste des enfan...[ :only-of-type ]
:target: La pseudo-classe CSS :TARGET permet de cibler tous les éléments ayant pour attribut id dont la valeur (moins le #) est égale l'ancre(#mon_ancre) prése...[ :target ]
:visited: La pseudo-classe CSS :VISITED permet d'assigner des propriétés CSS à une balise HTML A dont le lien a déjà été visité et à ses fils.Exemple d'écriture...[ :visited ]
[attribut]: Le sélecteur CSS d' [ATTRIBUT] [attribut operateur valeur] permet de sélectionner un élément en fonction d'un de ses attributs et leurs valeurs.Exemple d...[ [attribut] ]
universel: Le sélecteur UNIVERSEL CSS * (astérisque ou étoile) permet de sélectionner n'importe quel élément, quel que soit son type.Exemple d'écriture CSS de * ...[ universel ]

Les sélecteurs Css - Les cours Css