Sélecteurs CSS

CSS Documentation n°2

Sélecteur CSS
En CSS, les sélecteurs sont des modèles utilisés pour sélectionner le ou les éléments
que vous souhaitez styliser.

No Sélecteurs No Sélecteurs
1 .class 31 :first-of-type
2 .class1.class2 32 :focus
3 .class1 .class2 33 :fullscreen
4 #id 34 :hover
5 * 35 :in-range
6 element 36 :indeterminate
7 element.class 37 :invalid
8 element,element 38 :lang(language)
9 element element 39 :last-child
10 element>element 40 :last-of-type
11 element+element 41 :link
12 element1~element2 42 ::marker
13 [attribute] 43 :not(selector)
14 [attribute=value] 44 :nth-child(n)
15 [attribute~=value] 45 :nth-last-child(n)
16 [attribute|=value] 46 :nth-last-of-type(n)
17 [attribute^=value] 47 :nth-of-type(n)
18 [attribute$=value] 48 :only-of-type
19 [attribute*=value] 49 :only-child
20 :active 50 :optional
21 ::after 51 :out-of-range
22 ::before 52 ::placeholder
23 :checked 53 :read-only
24 :default 54 :read-write
25 :disabled 55 :required
26 :empty 56 :root
27 :enabled 57 ::selection
28 :first-child 58 :target
29 ::first-letter 59 :valid
30 ::first-line 60 :visited
 Sélecteur 1, 2, 3 : .class

Définition et utilisation
Le sélecteur .class sélectionne les éléments HTML avec un attribut de classe spécifique.

Syntaxe css

.class {
css declarations ;
}

Exemple
Sélectionnez et stylisez tous les éléments HTML avec class="intro" :

.intro {
background-color: yellow;
}

Sélectionne tous les éléments HTML avec class="name1 name2" :

.name1.name2 {
background-color: yellow;
}

Sélectionne tous les éléments HTML avec class="name2" qui sont des descendants d'un
élément avec class="name1" :

.name1 .name2 {
background-color: yellow;
}
 Sélecteur 4 : #id

Définition et utilisation
Le sélecteur #id sélectionne les éléments avec l'identifiant spécifié.
Remarque : Conventionnellement, les éléments HTML ne disposent que d'une seule et
unique ID qui ne sera déclaré pour aucun autre élément HTML.

Syntaxe css

#id {
css declarations ;
}

Exemple
Sélectionnez et stylisez tous les éléments HTML avec id="intro" :

#intro {
background-color: yellow;
}
 Sélecteur 5 : *

Définition et utilisation
Le sélecteur * sélectionne tous les éléments.
Remarque : Le sélecteur * peut également sélectionner tous les éléments à l'intérieur
d'un autre élément.

Syntaxe css

* {
css declarations ;
}

Exemple
Sélectionnez et stylisez tous les éléments de la page :

*{
background-color: yellow;
}

Sélectionnez et stylisez tous les éléments de la page a l’intérieur des éléments <div> :

div * {
background-color: yellow;
}
 Sélecteur 6, 7, 8 : élément

Définition et utilisation
Le sélecteur d'élément sélectionne tous les éléments portant le nom d'élément spécifié.

Syntaxe css

élément {
css declarations ;
}

Exemple
Sélectionnez et stylisez tous les éléments <p> :

p{
background-color: yellow;
}

Sélectionnez et stylisez chaque élément <p> avec la classe "intro" :

p.intro {
background-color: yellow;
}

Sélectionnez et stylisez tous les éléments <h2> ET tous les éléments <p> :

h2, p {
background-color: yellow;
}
 Sélecteur 9, 10, 11, 12 : élément

Définition et utilisation
Le sélecteur d'élément sélectionne tous les éléments portant le nom d'élément spécifié.

Syntaxe css

élément {
css declarations ;
}

Exemple
Sélectionnez chaque élément <p> qui se trouve à l'intérieur des éléments <div> :

div p {
background-color: yellow;
}

Sélectionnez et stylisez chaque élément <p> dont le parent est un élément <div> :

div > p {
background-color: yellow;
}

Sélectionnez le premier élément <p> placé immédiatement après les éléments <div> :

div + p {
background-color: yellow;
}

Sélectionnez tous les éléments <ul> précédés d'un élément <p> avec le même parent :

p ~ ul {
background-color: yellow;
}
 Sélecteur 13 : [attribute]

Définition et utilisation
Le sélecteur [attribute] est utilisé pour sélectionner des éléments avec l'attribut spécifié.

Syntaxe css

[attribute] {
css declarations ;
}

Exemple
Stylisez tous les éléments <a> avec un attribut target :

a.[target] {
background-color: yellow;
}

Stylisez tous les éléments <div> avec un attribut onclick :

div.[onclick] {
background-color: yellow;
}
 Sélecteur 14, 15, 16, 17 : [attribute ...]

Définition et utilisation
Le sélecteur [attribute] est utilisé pour sélectionner des éléments avec l'attribut spécifié.

Syntaxe css

[attribute] {
css declarations ;
}

Exemple
Stylisez tous les éléments <a> avec un attribut target="_blank" :

a[target="_blank"] {
background-color: yellow;
}

Stylisez tous les éléments <a> avec un attribut title="flower" :

a[title="flower"] {
background-color: yellow;
}

Stylisez les éléments dont la valeur de l'attribut lang commence par le mot spécifié, "en" :

[lang|="en"] {
background-color: yellow;
}

Stylisez tous les éléments <div> avec un attribut class qui commence par "btn" :

div[class^="btn"] {
background-color: yellow;
}
 Sélecteur 18, 19 : [attribute ...]

Définition et utilisation
Le sélecteur [attribute] est utilisé pour sélectionner des éléments avec l'attribut spécifié.

Syntaxe css

[attribute] {
css declarations ;
}

Exemple
Stylisez tous les éléments <div> avec un attribut class qui termine par "btn" :

div[class$="btn"] {
background-color: yellow;
}

Stylisez les éléments dont la valeur de l'attribut class contiens le mot spécifié, "list" :

[class*="list"] {
background-color: yellow;
}
 Sélecteur 20 : :active

Définition et utilisation
Le sélecteur :active est utilisé pour sélectionner et styliser l'élément actif. Un élément
devient actif lorsque vous cliquez dessus.
Astuce : :active doit venir après :hover (si présent) dans la définition CSS pour être
efficace !

Syntaxe css

:active {
css declarations ;
}

Exemple
Sélectionnez et stylisez le lien actif :

a:active {
background-color: yellow;
}

Sélectionnez et stylisez un élément <p>, <h1> et <a> lorsque vous cliquez dessus :

p:active, h1:active, a:active {

background-color: yellow;
}
 Sélecteur 21 : ::after

Définition et utilisation
Le sélecteur ::after insère quelque chose après le contenu de chaque élément(s)
sélectionné(s). Utilisez la propriété content pour spécifier le contenu à insérer.

Syntaxe css

::after {
css declarations ;
}

Exemple
Insérez du texte après le contenu de chaque élément :

a::after {
content: " - Any text";
}

Insérez du contenu après chaque élément <p> et stylisez le contenu inséré :

p::after {
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
 Sélecteur 22 : ::before

Définition et utilisation
Le sélecteur ::after insère quelque chose avant le contenu de chaque élément(s)
sélectionné(s). Utilisez la propriété content pour spécifier le contenu à insérer.

Syntaxe css

::before {
css declarations ;
}

Exemple
Insérez du texte avant le contenu de chaque élément :

a::before {
content: " - Any text";
}

Insérez du contenu avant chaque élément <p> et stylisez le contenu inséré :

p::before {
content: " - Remember this";
background-color: yellow;
color: red;
font-weight: bold;
}
 Sélecteur 23 : :checked

Définition et utilisation
Le sélecteur :checked correspond à chaque élément <input> coché (uniquement pour les
boutons radio et les cases à cocher) et à l'élément <option>.

Syntaxe css

:checked {
css declarations ;
}

Exemple
Définissez la hauteur et la largeur de tous les éléments <input> cochés :

input:checked {
height: 50px;
width: 50px;
}

Définissez la hauteur et la largeur de tous les éléments <input> cochés :

option:checked {
height: 50px;
width: 50px;
}
 Sélecteur 24 : :default

Définition et utilisation
Le sélecteur :default sélectionne l'élément de formulaire par défaut dans un groupe
d'éléments liés.
Le sélecteur :default ne peut être utilisé que sur les éléments <button>,
<input type="checkbox">, <input type="radio"> et <option>.

Syntaxe css

:default {
css declarations ;
}

Exemple
Ajoutez une couleur d'ombre rouge à l'élément d'entrée par défaut :

input:default {
box-shadow: 0px 0px 1px 1px red;
}
 Sélecteur 25 : :disabled

Définition et utilisation
Le sélecteur :disabled correspond à chaque élément désactivé (principalement utilisé sur
les éléments de formulaire).

Syntaxe css

:disabled {
css declarations ;
}

Exemple
Styliser tous les éléments <input> d'entrée désactivés de type="text" :

input[type=text]:disabled {
background: #dddddd;
}

Définir une couleur d'arrière-plan pour tous les éléments <option> désactivés :

option:disabled {
background: red;
}
 Sélecteur 26 : :empty

Définition et utilisation
Le sélecteur :empty correspond à tous les éléments qui n'ont pas d'enfants (y compris
les nœuds de texte).

Syntaxe css

:empty {
css declarations ;
}

Exemple
Spécifiez une couleur d'arrière-plan pour les éléments <p> vides :

p:empty {
background: #dddddd;
}
 Sélecteur 27 : :enabled

Définition et utilisation
Le sélecteur :enabled correspond à chaque élément activé (principalement utilisé sur les
éléments de formulaire).

Syntaxe css

:enabled {
css declarations ;
}

Exemple
Styliser tous les éléments <input> d'entrée activé de type="text" :

input[type=text]:enabled {
background: #dddddd;
}

Définir une couleur d'arrière-plan pour tous les éléments <option> activé :

option:enabled {
background: red;
}
 Sélecteur 28 : :first-child

Définition et utilisation
Le sélecteur :first-child est utilisé pour sélectionner le sélecteur spécifié, uniquement s'il
s'agit du premier enfant de son parent.

Syntaxe css

:first-child {
css declarations ;
}

Exemple
Sélectionnez et stylisez chaque élément <p> qui est le premier enfant de son parent :

p:first-child {
background: #dddddd;
}

Stylisez chaque élément <i> de chaque élément <p>, où l'élément <p> est le premier enfant
de son parent :

p:first-child i {
background: red;
}
 Sélecteur 29 : ::first-letter

Définition et utilisation
Le sélecteur ::first-letter est utilisé pour ajouter un style à la première lettre du
sélecteur spécifié.
Remarque : Les propriétés suivantes peuvent être utilisées avec ::first-letter :

• propriétés de police, • décoration de texte,

• propriétés de couleur, • alignement vertical,
• propriétés d'arrière-plan, • transformation de texte,
• propriétés de marge, • hauteur de ligne,
• propriétés de remplissage, • flotteur clair.
• propriétés de bordure,

Note : le sélecteur ::first-letter ne peut être utilisé qu'avec des éléments de type bloc.

Syntaxe css

::first-letter {
css declarations ;
}

Exemple
Sélectionnez et stylisez la première lettre de chaque élément <p> :

p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
 Sélecteur 30 : ::first-line

Définition et utilisation
Le sélecteur ::first-line est utilisé pour ajouter un style à la première ligne du sélecteur
spécifié.
Remarque : Les propriétés suivantes peuvent être utilisées avec ::first-line :

• font properties • text-decoration

• color properties • vertical-align

• background properties • text-transform

• word-spacing • line-height

• letter-spacing • clear

Note : le sélecteur ::first-line ne peut être utilisé qu'avec des éléments de type bloc.

Syntaxe css

::first-line {
css declarations ;
}

Exemple
Sélectionnez et stylisez la première lettre de chaque élément <p> :

p::first-line {
background-color: yellow;
}
 Sélecteur 31 : :first-of-type

Définition et utilisation
Le sélecteur :first-of-type correspond à chaque élément qui est le premier enfant, d'un
type particulier, de son parent.
Astuce : Le sélecteur :first-of-type correspond à :nth-of-type(1).

Syntaxe css

:first-of-type {
css declarations ;
}

Exemple
Spécifiez une couleur d'arrière-plan pour le premier élément <p> de son parent :

p:first-of-type {
background-color: yellow;
}
 Sélecteur 32 : :focus

Définition et utilisation
Le sélecteur :focus est utilisé pour sélectionner l'élément qui a le focus (soit il est
sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le
champ d'un formulaire).
Astuce : Le sélecteur :focus est autorisé sur les éléments qui acceptent les événements
clavier ou d'autres entrées utilisateur.

Syntaxe css

:focus {
css declarations ;
}

Exemple
Sélectionnez et stylisez un champ de saisie lorsqu'il obtient le focus :

input:focus {
background-color: yellow;
}
 Sélecteur 33 : :fullscreen

Définition et utilisation
Le sélecteur :fullscreen est utilisé pour sélectionner le ou les éléments qui sont en mode
plein écran.
Note : Il est possible de sélectionner un élément non-plein écran avec :not(:fullscreen).

Syntaxe css

:fullscreen {
css declarations ;
}

Exemple
Définir la couleur d'arrière-plan sur jaune lorsque la page est en mode plein écran :

:fullscreen {
background-color: purple;
}

Définir la couleur d'arrière-plan de l'élément <div> lorsqu'il n'est pas en plein écran :

div:not(:fullscreen) {
background-color: yellow;
}

Définir la couleur d'arrière-plan de l'élément <div> lorsqu'il est en plein écran :

div:fullscreen {
background-color: red;
}
 Sélecteur 34 : :hover

Définition et utilisation
Le sélecteur :hover est utilisé pour sélectionner des éléments lorsque vous passez la
souris sur eux.
Astuce : Le sélecteur :hover peut être utilisé sur tous les éléments, pas seulement sur
les liens.
Astuce : Utilisez le sélecteur :link pour styliser les liens vers des pages non visitées, le
sélecteur :visited pour styliser les liens vers les pages visitées et le sélecteur :active
pour styliser le lien actif.
Remarque : :hover DOIT venir après :link et :visited (s'ils sont présents) dans la définition
CSS, pour être efficace !

Syntaxe css

:hover {
css declarations ;
}

Exemple
Sélectionnez et stylisez un lien lorsque vous passez la souris dessus :

a:hover {
background-color: purple;
}

Sélectionnez et stylisez un élément <p>, <h1> et <a> lorsque vous passez la souris dessus :

p:hover, h1:hover, a:hover {

background-color: yellow;
}
 Sélecteur 35 : :in-range

Définition et utilisation
Le sélecteur :in-range sélectionne tous les éléments dont la valeur se situe dans une
plage spécifiée.
Remarque : Le sélecteur :in-range ne fonctionne que pour les éléments HTML d'entrée
avec des attributs min et/ou max !
Astuce : utilisez le sélecteur :out-of-range pour sélectionner tous les éléments dont la
valeur est en dehors d'une plage spécifiée.

Syntaxe css

:in-range {
css declarations ;
}

Exemple
Sélectionnez et stylisez uniquement si la valeur de l'élément <input> est "dans la plage" :

input:in-range {
border: 2px solid black;
}
 Sélecteur 36 : :indeterminate

Définition et utilisation
Le sélecteur :indeterminate sélectionne les éléments de formulaire qui sont dans un état
indéterminé.
Le sélecteur :indeterminate ne peut être utilisé que sur les éléments <input
type="checkbox">, <input type="radio"> et <progress>.
Remarque : Les cases à cocher ne peuvent pas être indéterminées avec HTML : il s'agit
d'une propriété de l'objet case à cocher, qui peut être définie sur "true" par JavaScript.
Les boutons radio sont indéterminés lorsque tous les boutons radio portant la même
valeur de nom dans le formulaire ne sont pas cochés.

Syntaxe css

:indeterminate {
css declarations ;
}

Exemple
Ajouter une couleur d'ombre rouge aux entrées indéterminées :

input:indeterminate {
box-shadow: 0px 0px 1px 1px red;
}
 Sélecteur 37 : :invalid

Définition et utilisation
Le sélecteur :invalid sélectionne les éléments de formulaire avec une valeur qui n'est pas
validée selon les paramètres de l'élément.
Remarque : Le sélecteur :invalid ne fonctionne que pour les éléments de formulaire avec
des limitations, tels que les éléments de saisie avec des attributs min et max, les champs
d'e-mail sans adresse électronique légale ou les champs numériques sans valeur
numérique, etc.
Astuce : utilisez le sélecteur :valid pour sélectionner les éléments de formulaire avec une
valeur qui valide en fonction des paramètres de l'élément.

Syntaxe css

:invalid {
css declarations ;
}

Exemple
Sélectionnez et stylisez uniquement si la valeur de l'élément <input> n'est pas valide :

input:invalid {
border: 2px solid red;
}
 Sélecteur 38 : :lang()

Définition et utilisation
Le sélecteur :lang() est utilisé pour sélectionner des éléments avec un attribut lang avec
la valeur spécifiée.
Remarque : La valeur de l'attribut lang est le plus souvent un code de langue à deux
lettres, comme lang="fr" (pour le français), ou deux codes de langue combinés, comme
lang="fr-ca" (pour le français canadien).

Syntaxe css

:lang() {
css declarations ;
}

Exemple
Stylisez chaque élément <p> avec une valeur d'attribut lang égale à "it" (italien) :

p:lang(it) {
background-color: red;
}
 Sélecteur 39 : :last-child

Définition et utilisation
Le sélecteur :last-child correspond à chaque élément qui est le dernier enfant de son
parent.
Astuce : p:last-child est égal à p:nth-last-child(1).

Syntaxe css

:last-child {
css declarations ;
}

Exemple
Sélectionner l'élément <p> qui est le dernier enfant de son parent :

p:last-child {
background-color: blue;
}
 Sélecteur 40 : :last-of-type()

Définition et utilisation
Le sélecteur :last-of-type correspond à chaque élément qui est le dernier enfant, d'un
type particulier, de son parent.
Astuce : :last-of-type correspond à :nth-last-of-type(1).

Syntaxe css

:last-of-type() {
css declarations ;
}

Exemple
Spécifiez une couleur d'arrière-plan pour le dernier élément <p> de son parent :

p:last-of-type {
background-color: blue;
}
 Sélecteur 41 : :link

Définition et utilisation
Le sélecteur :link est utilisé pour sélectionner les liens non visités.
Remarque : Le sélecteur :link ne stylise pas les liens que vous avez déjà visités.
Astuce : utilisez le sélecteur :visited pour styliser les liens vers les pages visitées, le
sélecteur :hover pour styliser les liens lorsque vous passez la souris sur eux et le
sélecteur :active pour styliser les liens lorsque vous cliquez dessus.

Syntaxe css

:link {
css declarations ;
}

Exemple
Sélectionner et styliser les liens non visités :

a:link {
background-color: blue;
}
 Sélecteur 42 : ::marker

Définition et utilisation
Le sélecteur ::marker sélectionne le marqueur d’un élément de liste. Ce sélecteur
fonctionne sur n'importe quel élément défini pour ''display:list-item''.

Syntaxe css

::marker {
css declarations ;
}

Exemple
Styliser les marqueurs des éléments de la liste :

::marker {
color: red;
}
 Sélecteur 43 : :not()

Définition et utilisation
Le sélecteur :not(selector) correspond à chaque élément qui n'est PAS l'élément ou le
sélecteur spécifié.

Syntaxe css

:not() {
css declarations ;
}

Exemple
Styliser tous les éléments qui ne sont pas un élément <p> :

:not(p) {
color: red;
}
 Sélecteur 44 : :nth-child()

Définition et utilisation
Le sélecteur :nth-child(n) correspond à chaque élément qui est le nième enfant de son
parent, ''n'' peut être un nombre, un mot-clé ou une formule (comme an + b).
Remarque : Impair (odd) et pair (even) sont des mots-clés qui peuvent être utilisés pour
faire correspondre des éléments enfants dont l'index est impair ou pair (l'index du
premier enfant est 1).
Remarque : En utilisant une formule (an + b). ''a'' représente une taille de cycle, n est un
compteur (commence à 0) et b est une valeur de décalage.

Syntaxe css

:nth-child() {
css declarations ;
}

Exemple
Spécifier deux couleurs d'arrière-plan différentes pour les éléments <p> impairs et pairs :

p:nth-child(odd) {
background: red;
}

p:nth-child(even) {
background: lightgreen;
}

Sélectionner tous les éléments <p> dont l'index est un multiple de 3 (3, 6, 9, 12, etc.) :

p:nth-child(3n+0) {
background: red;
}
 Sélecteur 45 : :nth-last-child()

Définition et utilisation
Le sélecteur :nth-last-child(n) correspond à chaque élément qui est le nième enfant,
quel que soit le type, de son parent, en commençant par le dernier enfant. n peut être un
nombre, un mot-clé ou une formule.
Astuce : Utilisez le sélecteur :nth-last-child(n) pour sélectionner l'élément qui est le
nième enfant, d'un type spécifié, de son parent, à partir du dernier enfant.

Syntaxe css

:nth-last-child() {
css declarations ;
}

Exemple
Spécifier deux couleurs d'arrière-plan différentes pour les éléments <p> impairs et pairs
en commençant par le dernier:

p:nth-last-child(odd) {
background: red;
}

p:nth-child(even) {
background: lightgreen;
}

Sélectionner tous les éléments <p> dont l'index est un multiple de 3 (3, 6, 9, 12, etc.) en
commençant par le dernier :

p:nth-last-child(3n+0) {
background: red;
}
 Sélecteur 46 : :nth-last-of-type()

Définition et utilisation
Le sélecteur :nth-last-of-type(n) correspond à chaque élément qui est le nième enfant,
d'un type particulier, de son parent, à partir du dernier enfant. ''n'' peut être un nombre,
un mot-clé ou une formule.
Astuce : Utilisez le sélecteur :nth-last-child(n) sélecteur pour sélectionner l'élément qui
est le nième enfant, quel que soit le type, de son parent, en comptant à partir du dernier
enfant.

Syntaxe css

:nth-last-of-type() {
css declarations ;
}

Exemple
Spécifier deux couleurs d'arrière-plan différentes pour les éléments <p> impairs et pairs
en commençant par le dernier:

p:nth-last-of-type(odd) {
background: red;
}

p:nth-of-type(even) {
background: lightgreen;
}

Sélectionner tous les éléments <p> dont l'index est un multiple de 3 (3, 6, 9, 12, etc.) en
commençant par le dernier :

p:nth-last-of-type(3n+0) {
background: red;
}
 Sélecteur 47 : :nth-of-type()

Définition et utilisation
Le sélecteur :nth-of-type(n) correspond à chaque élément qui est le nième enfant de son
parent, ''n'' peut être un nombre, un mot-clé ou une formule (comme an + b).
Remarque : Impair (odd) et pair (even) sont des mots-clés qui peuvent être utilisés pour
faire correspondre des éléments enfants dont l'index est impair ou pair (l'index du
premier enfant est 1).
Remarque : En utilisant une formule (an + b). ''a'' représente une taille de cycle, n est un
compteur (commence à 0) et b est une valeur de décalage.

Syntaxe css

:nth-of-type() {
css declarations ;
}

Exemple
Spécifier deux couleurs d'arrière-plan différentes pour les éléments <p> impairs et pairs :

p:nth-of-type(odd) {
background: red;
}

p:nth-of-type(even) {
background: lightgreen;
}

Sélectionner tous les éléments <p> dont l'index est un multiple de 3 (3, 6, 9, 12, etc.) :

p:nth-of-type(3n+0) {
background: red;
}
 Sélecteur 48 : :only-of-type

Définition et utilisation
Le sélecteur :only-of-type correspond à chaque élément qui est le seul enfant de son
type, de son parent.

Syntaxe css

:only-of-type {
css declarations ;
}

Exemple
Spécifiez une couleur d'arrière-plan pour chaque élément <p> qui est le seul enfant de
son type, de son parent :

p:only-of-type {
background: red;
}
 Sélecteur 49 : :only-child

Définition et utilisation
Le sélecteur :only-child correspond à chaque élément qui est le seul enfant de son
parent.

Syntaxe css

:only-child {
css declarations ;
}

Exemple
Spécifiez une couleur d'arrière-plan pour chaque élément <p> qui est le seul enfant de
son parent :

p:only-child {
background: red;
}
 Sélecteur 50 : :out-of-range

Définition et utilisation
Le sélecteur :out-of-range sélectionne tous les éléments dont la valeur est en dehors
d'une plage spécifiée.
Remarque : Le sélecteur :out-of-range ne fonctionne que pour les éléments d'entrée
avec des attributs min et/ou max !
Astuce : utilisez le sélecteur :in-range pour sélectionner tous les éléments dont la valeur
se situe dans une plage spécifiée.

Syntaxe css

:out-of-range {
css declarations ;
}

Exemple
Sélectionnez et stylisez uniquement si la valeur de l'élément <input> est "hors plage" :

input:out-of-range {
background: red;
}
 Sélecteur 51 : :optional

Définition et utilisation
Le sélecteur :optional sélectionne les éléments de formulaire qui sont facultatifs.Les
éléments de formulaire sans attribut obligatoire sont définis comme facultatifs.
Remarque : Le sélecteur :optional s'applique uniquement aux éléments du formulaire :
input, select et textarea.
Astuce : utilisez le sélecteur :required pour sélectionner les éléments de formulaire
requis.

Syntaxe css

:optional {
css declarations ;
}

Exemple
Sélectionnez et stylisez uniquement si l'élément <input> n'a pas d'attribut :required :

input:optional {
background: red;
}
 Sélecteur 52 : ::placeholder

Définition et utilisation
Le sélecteur ::placeholder sélectionne les éléments de formulaire avec du texte d'espace
réservé et vous permet de styliser le texte d'espace réservé. Le texte d'espace réservé
est défini avec l'attribut ::placeholder, qui spécifie une indication décrivant la valeur
attendue d'un champ de saisie.
Astuce : La couleur par défaut du texte de l'espace réservé est le gris clair dans la
plupart des navigateurs.

Syntaxe css

::placeholder {
css declarations ;
}

Exemple
Changer la couleur du texte d'espace réservé d'un champ de saisie :

/* Edge */
::-webkit-input-placeholder {
color: red;
}

/* Internet Explorer 10-11 */

:-ms-input-placeholder {
color: red;
}

::placeholder {
color: red;
}
 Sélecteur 53 : :read-only

Définition et utilisation
Le sélecteur :read-only sélectionne les éléments avec un attribut "readonly". Les
éléments de formulaire avec un attribut "readonly" sont définis comme ''lecture seule''.

Syntaxe css

:read-only {
css declarations ;
}

Exemple
Stylisez uniquement si l'élément d'entrée à l'attribut HTML "readonly" :

input:read-only {
background-color: yellow;
}
 Sélecteur 54 : :read-write

Définition et utilisation
Le sélecteur :read-write sélectionne les éléments sans l'attribut "readonly". Les
éléments de formulaire sans attribut ''readonly'' et sans attribut ''disabled'' sont définis
comme « en lecture » et « en écriture ».

Syntaxe css

:read-write {
css declarations ;
}

Exemple
Stylisez uniquement si l'élément d'entrée n'a pas d'attribut HTML "readonly" :

input:read-write {
background-color: yellow;
}
 Sélecteur 55 : :required

Définition et utilisation
Le sélecteur :required sélectionne les éléments de formulaire requis.Les éléments de
formulaire avec un attribut obligatoire sont définis comme requis.
Remarque : Le sélecteur :required s'applique uniquement aux éléments du formulaire :
input, select et textarea.
Astuce : utilisez le sélecteur :optional pour sélectionner les éléments de formulaire qui
sont facultatifs.

Syntaxe css

:required {
css declarations ;
}

Exemple
Stylisez uniquement si l'élément <input> a un attribut HTML "required" :

input:required {
background-color: yellow;
}
 Sélecteur 56 : :root

Définition et utilisation
Le sélecteur :root correspond à l'élément racine du document CSS.
Note : En HTML, l'élément racine est toujours l'élément <html>.

Syntaxe css

:root {
css declarations ;
}

Exemple
Définissez la couleur d'arrière-plan du document HTML :

:root {
background: #f7f7f7;
}
 Sélecteur 57 : ::selection

Définition et utilisation
Le sélecteur ::selection correspond à la partie d'un élément sélectionné par un
utilisateur.
Remarque : Seules quelques propriétés CSS peuvent être appliquées au
sélecteur ::selection : couleur, arrière-plan, curseur et contour.

Syntaxe css

::selection {
css declarations ;
}

Exemple
Rendre le texte sélectionné rouge sur fond jaune :

::selection {
color: red;
background: yellow;
}
 Sélecteur 58 : :target

Définition et utilisation
Les URL avec un # suivi d'un nom d'ancre renvoient à un certain élément dans un
document. L'élément auquel est lié est l'élément cible. Le sélecteur :target peut être
utilisé pour styliser l’élément cible actif actuel.

Syntaxe css

:target {
css declarations ;
}

Exemple
Sélectionner l'ancre HTML active :

:target {
color: red;
background: yellow;
}
 Sélecteur 59 : :valid

Définition et utilisation
Le sélecteur :valid sélectionne les éléments de formulaire avec une valeur qui valide en
fonction des paramètres de l'élément.
Remarque : Le sélecteur :valid ne fonctionne que pour les éléments de formulaire avec
des limitations, tels que les éléments de saisie avec des attributs min et max, les champs
d'e-mail avec une adresse électronique légale ou les champs numériques avec une
valeur numérique, etc.
Astuce : Utilisez le sélecteur :invalid pour sélectionner des éléments de formulaire avec
une valeur qui n'est pas validée selon les paramètres de l'élément.

Syntaxe css

:valid {
css declarations ;
}

Exemple
Sélectionnez et stylisez uniquement si la valeur de l'élément <input> est valide :

input:valid {
color: red;
}
 Sélecteur 60 : :visited

Définition et utilisation
Le sélecteur :visited est utilisé pour sélectionner les liens visités.
Astuce : utilisez le sélecteur :link pour styliser les liens vers des pages non visitées, le
sélecteur :hover pour styliser les liens lorsque vous passez la souris sur eux et le
sélecteur :active pour styliser les liens lorsque vous cliquez dessus. Les navigateurs
limitent les styles pouvant être définis pour les liens a:visited, en raison de problèmes de
sécurité.

Les styles autorisés sont :

• couleur • couleur du contour

• couleur d'arrière-plan • couleur de la règle de la colonne

• couleur de la bordure • les parties de couleur du

remplissage et du contour

Tous les autres styles sont hérités d'un :link.

Syntaxe css

:visited {
css declarations ;
}

Exemple
Sélectionnez et stylisez les liens visités :

a:visited {
color: pink;
}