Les pseudo classes vont permettre de sélectionner des éléments à partir d'informations qui ne se trouve pas directement dans le DOM.

Les pseudo classes d'attibuts sont des sélecteurs simples qui peuvent être utilisées telle que, sans être reliées à un élément particulier (voir Remarques en fin de page).

Toutefois, comme pour les sélecteurs d'attributs, dans 99.99% des cas les pseudo classes sont utilisées avec un sélecteur principal et fonctionnent comme une spécialisation de ce sélecteur : le moteur CSS va d'abord cibler tous les éléments qui répondent au sélecteur principal, puis parmi ce groupe sélectionner uniquement ceux répondant aux caractèristiques de la pseudo classe.

La syntaxe utilisée pour les pseudo classes repose sur un selecteur suivi du caractère deux points `:` suivi du nom de la pseudo classe.

syntaxe sélecteur pseudo classe

Il ne doit pas y avoir d'espaces avant ou après le caractère `:`.

Certaines pseudo classes sont dynamiques dans le sens où elles réagissent aux actions de l'utilisateur. C'est le navigateur qui prend en compte automatiquement le traitement de ses changements d'état.

### Interaction : hover, active, focus

Syntaxe `:hover`
`:active`
`:focus`

    input:focus {
    	outline: 1px solid red;
    	}

On a ici des pseudo classes d'interaction.

`:hover` sélectionne les éléments survolés par la souris.

`:active` sélectionne les éléments sur lequels le bouton de la souris est enfoncé

`:focus` sélectionne les éléments qui deviennent la cible des événements souris ou clavier

L'exemple suivant affiche un halo jaune autour des éléments input d'un formulaire quand ils obtiennent le focus (par clique dedans, ou par tabulation). C'est la pseudo classe `:focus` qui est utilisée. Quand la souris survole le bouton (`:hover`), le texte est modifié.
Remarque : l'élément form dans le code HTML a été volontairement "oublié" pour simplifier l'exemple.

Exemple : pseudo classes d'interaction
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Pénétrage dans l'Etoile Noire</h3> <label for="zDroid">dro-ID</label> <input type="text" id="zDroid" name="txtDroid"> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse" name="txtPasse"> <label><input type="checkbox" id="zCnx" name="chkCnx"> Restez connecté</label> <input type="submit" value="Entrage" name="btnEntrer"> </body> </html>
Fichier CSS : styles.css
/* Sélection des élément input quand ils ont le focus */ input:focus { box-shadow: 0 1px 9px 2px red; } /* Selection du bouton quand il est survolé */ input[type="submit"]:hover { font-weight: bold; letter-spacing: 5px; } /* Décoration, sans importance pour l'exemple */ label {display: block; margin-top: 1em; width: 150px;} input[type="submit"] {margin-top: 2em; width: 144px;} body {background: #43515B; color: lightyellow;}

### Liens : link, visited

Syntaxe `a:link`
`a:visited`

    a:link {
    	text-decoration: none;
    	}

Ces pseudo classes fonctionnent uniquement avec des liens (élément a) et quand ils ont un attribut `href`.

`a:link` sélectionne les éléments a qui n'ont jamais été visités.

`a:visited`qui ont déjà été visités.

L'exemple suivant supprime le soulignement du texte du lien et rend sa couleur identique qu'il ait été visité ou pas. Comme souvent avec les liens, on ajoute aussi un sélecteur d'interaction survolé.

Exemple : pseudo classes de lien
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Hagard des Etoiles</h3> <img src="../exemples/img/darkv2.png" align="left"> <p><a href="luke.html" target="new">Luke</a>, on a été racheté par <a href="http://disney.com"> Disney</a>.</p> <p>Rejoint nous, et ensemble nous régnerons sur <a href="http://www.disneylandparis.com/" target="new">Disneyland Paris</a>. </p> </body> </html>
Fichier CSS : styles.css
/* Sélection des liens non visités */ a:link { text-decoration: none; color: #00E; } /* Sélection des liens visités */ a:visited { color: #00E; } /* Sélection des liens survolés */ a:hover { color: red; text-decoration: underline; }

### Position : first-child, last-child, only-child

Syntaxe `:first-child`
`:last-child`
`:only-child`

    p:first-child {
    	text-indent: 3em;
    	}
    li:last-child {
    	border-bottom: 1px solid;
    	}

On a ici des pseudo classes structurelles. Elles travaillent sur la position des éléments au sein d'un ensemble d'enfants.

`:first-child` sélectionne le premier élément d'un ensemble d'enfants.

`:last-child` sélectionne le dernier élément d'un ensemble d'enfants.

`:only-child` selectionne un élément qui est le seul enfant dans une imbrication.

L'exemple suivant sélectionne les premières et dernières lignes des listes.
On cible d'abord tous les éléments li et on obtiendra 2 ensembles, l'un dont le parent est un élément ul et l'autre dont le parent est l'élément ol.
On spécialise ensuite en demandant li les premiers éléments du groupe et les derniers.

Exemple : pseudo classes structurelles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Star Wars - ze prélogie</h3> <h4>Personnages</h4> <ul> <li>Anakin Webwalker</li> <li>Padmé Amidala</li> <li>Yoda</li> <li>Obi Span Kenobi</li> </ul> <h4>Films</h4> <ol> <li>Le DOM fantôme</li> <li>L'attaque des .com</li> <li>La Revanche des Siths Web</li> </ol> </body> </html>
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css
/* Sélection des premieres lignes des listes */ li:first-child { background: red; } /* Sélection des dernières lignes des listes */ li:last-child { border: 2px solid red; }
Il est important de comprendre que les selecteurs de pseudo classes d'enfants font correspondre l'élément sélectionné principal et sa postion.
Dans l'exemple précédent, la règle :

    h4:first-child {
    	background: red;
    	}

ne sélectionnera pas le 1er élément h4 car si cet élément est bien le premier de ce type dans le document, il n'est pas le 1er enfant de son parent (l'élément body).
groupe des enfants avec h4

Si vous avez une telle sélection à faire, il faut utiliser `first-of-type`, `last-of-type` ou `only-of-type`

### Position : nth-child(), nth-last-child()

Syntaxe `:nth-child()`
`:nth-last-child()`

    li:nth-child(5) {
    	font-weight: bold;
    	}
    li:nth-child(3n) {
    	color: green;
    	}

On a ici des pseudo classes structurelles qui travaillent sur la position des éléments au sein d'un ensemble d'enfants.
Elles sont un peu particulières car ce sont des fonctions qui acceptent un argument.

La différence entre les deux sélecteurs tient uniquement dans le sens ou le comptage de la position se fait : du début à la fin pour `nth-child()`, de la fin vers le début pour `nth-last-child()`.

Les sélections réalisées sont trés différentes selon la valeur de l'argument.

Un nombre entier positif sélectionne l'élément à la position donnée.

1
2
3
4
5
6
7
8
9
10
11
12
`:nth-child(
)`

Le mot clé `odd` sélectionne les éléments impaires et le mot clé `even` les éléments paires.

1
2
3
4
5
6
7
8
9
10
11
12
`:nth-child(
)`

Une formule sélectionne tous les n-ièmes éléments.

1
2
3
4
5
6
7
8
9
10
11
12
`:nth-child(
)`

Une formule sélectionne tous les x-ièmes éléments dans des groupes de n éléments. Par exemple `:nth-child(3n+2)` sélectionnera tous les 2ème éléments dans des groupes de 3 éléments.

1
2
3
4
5
6
7
8
9
10
11
12
`:nth-child(
+
)`

Dans la formule `(xn + y)`, si le premier membre est négatif, on obtient encore une autre méthode de sélection : `y` représente la limite des éléments sur lesquels vont porter `xn`. Par exemple `:nth-child(-2n+6)` limitera l'application du style aux 6 premiers éléments. Dans ce groupe, un élément sur 2 sera sélectionné.

1
2
3
4
5
6
7
8
9
10
11
12
`:nth-child(
+
)`
Exemple : pseudo classes structurelles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Véhicules de prêt</h3> <p>1 Y-wing</p> <p>2 N-1 Naboo</p> <p>3 Chasseurs Sith</p> <p>4 B-wing</p> <p>5 X-wing T-65</p> <p>6 A-wing RZ-1</p> <p>7 Tie Avenger</p> <p>8 Tie Droïde</p> <p>9 Chasseurs tie</p> <p>10 Intercepteurs Tie</p> </body> </html>
Fichier CSS : styles.css
/* Les paragraphes paires : 2n est l'équivalent de even */ p:nth-child(2n) { background: aqua; } /* Les paragraphes impaires : 2n+1 est l'équivalent de odd */ p:nth-child(2n+1) { background:darkturquoise; } /* Tous les paragraphes */ p { padding: 4px; text-align: center; margin: 0.2em; } /* Paragraphe survolé */ p:hover { background: orangered; color: white; }

### Type : first-of-type, last-of-type, only-of-type

Syntaxe `:first-of-type`
`:last-cof-type`
`:only-of-type`

    p:first-of-type {
    	background: azure;
    	}
    li:only-of-type {
    	margin: 0;
    	}

On a ici des pseudo classes structurelles qui travaillent sur la position et le type des éléments au sein d'un ensemble d'enfants.

`:first-of-type` sélectionne le premier élément d'un certain type dans un ensemble d'enfants.

`:last-of-type` sélectionne le dernier élément d'un certain type dans un ensemble d'enfants.

`:only-of-type` sélectionne un élément d'un certain type qui est le seul enfant de ce type dans une hiérarchie.

L'exemple suivant sélectionne le premier élément h4 et le dernier élément ul du document.

Exemple : pseudo classes structurelles
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Star Wars - ze prélogie</h3> <h4>Personnages</h4> <ul> <li>Anakin Webwalker</li> <li>Padmé Amidala</li> <li>Yoda</li> <li>Obi Span Kenobi</li> </ul> <h4>Films</h4> <ul> <li>Le DOM fantôme</li> <li>L'attaque des .com</li> <li>La Revanche des Siths Web</li> </ul> </body> </html>
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css
/* Sélection des premiers éléments h4 */ h4:first-of-type { background: red; } /* Sélection des derniers éléments ul */ ul:last-of-type { border: 2px solid red; }

### Type : nth-of-type(), nth-last-of-type()

Syntaxe `:nth-of-type()`
`:nth-last-of-type()`

    p:nth-last-of-type(2) {
    	font-variant: italic;
    	}
    img:nth-of-type(2n) {
    	border: 2px solid red;
    	}

On a ici des pseudo classes structurelles qui travaillent sur la position et le type des éléments au sein d'un ensemble d'enfants.
Elles sont un peu particulières car ce sont des fonctions qui acceptent un argument.

La différence entre les deux sélecteurs tient uniquement dans le sens ou le comptage de la position se fait : du début à la fin pour `nth-of-type()`, de la fin vers le début pour `nth-last-of-type()`.

Les sélections réalisées sont trés différentes selon la valeur de l'argument.
Elles fonctionnent exactement de la même façon que pour les pseudo classes `nth-child()` et `nth-last-child()`. Reportez vous aux explications précédentes pour voir comment utiliser le paramètre de la fonction.

### Formulaire : enabled, disabled, checked

Syntaxe `:enabled`
`:disabled`
`:checked`

    input:disabled {
    	background: grey;
    	}
    input:checked {
    	outline: 2px solid red;
    	}

On a ici des pseudo classes d'interface qui travaillent sur les éléments de formulaire et permettent de sélectionner des zones de saisie en fonction de leur état.

`:enabled` sélectionne les zones pour lesquelles la saisie ou le click sont possibles.

`:disabled` sélectionne les zones qui sont désactivées.

`:checked` sélectionne les zones qui sont cochées (boutons radio ou cases à cocher).

A noter 2 autres pseudo classes qu'on ne trouve pas encore dans les spécifications du W3C, mais déjà prises en compte par certains navigateurs :

`:valid` sélectionne les zone pour lesquelles la saisie est valide d'après les contraintes définies.

`:invalid` sélectionne les zone pour lesquelles une erreur de saisie a été détectée.

L'exemple suivant gère les éléments input desactivés et ceux qui sont cochés.

Exemple : pseudo classes d'interface
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Pénétrage dans l'Etoile Noire</h3> <label for="zDroid">dro-ID</label> <input type="text" id="zDroid" name="txtDroid"> <label for="zNom">Nom</label> <input type="text" id="zNom" name="txtNom" disabled> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse" name="txtPasse"> <label><input type="checkbox" id="zCnx" name="chkCnx"> S'en souvenir</label> <p>Restez connecté <label><input type="radio" name="radC"> Oui</label> <label><input type="radio" name="radC"> Non</label> </p> <input type="submit" value="Entrage" name="btnEntrer"> </body> </html>
Fichier CSS : styles.css
/* Sélection des éléments input désactivés */ input:disabled { background: grey; border: 2px solid maroon; } /* Selection des éléments input cochés */ input:checked { outline: 2px solid red; } /* Décoration, sans importance pour l'exemple */ label {display: block; margin-top: 0.5em; width: 150px;} input[type="submit"] {width: 144px;} body {background: #43515B; color: lightyellow;}

### Négation : not

Syntaxe `:not(S)`

    input:not([type="text"]) {
    	width: 300px;
    	}
    :not(p) {
    	margin: 0;
    	}

Cette pseudo classe est une fonction qui accepte comme argument un autre sélecteur simple.

Elle permet de sélectionner tous les éléments qui ne sont pas sélectionné par le sélecteur en argument

Par exemple `:not(p)` sélectionnera tous les éléments du document HTML qui ne sont pas des éléments de type p, c'est à dire tout sauf les paragraphes.

`input:not([type="text"])` sélectionnera tous les éléments input dont la valeur de l'attribut `type` est différente de `text`

`.commentaire:not(:first-child)` sélectionnera tous les éléments de la classe `commentaire` qui ne sont pas le premier enfant de leur parent.

L'exemple suivant affiche en ligne les éléments label qui n'ont pas d'attribut `for`.

Exemple : pseudo classes de négation
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Pénétrage dans l'Etoile Noire</h3> <label for="zDroid">dro-ID</label> <input type="text" id="zDroid" name="txtDroid"> <label for="zPasse">Mot de passe</label> <input type="password" id="zPasse" name="txtPasse"> <label><input type="checkbox" id="zCnx" name="chkCnx"> S'en souvenir</label> <p>Restez connecté <label><input type="radio" name="radC"> Oui</label> <label><input type="radio" name="radC"> Non</label> </p> <input type="submit" value="Entrage" name="btnEntrer"> </body> </html>
Fichier CSS : styles.css
/* Sélection des éléments label sans attribut for */ label:not([for]) { display: inline; } /* Décoration, sans importance pour l'exemple */ label {display: block; margin-top: 0.5em; width: 150px;} input[type="submit"] {width: 144px;} body {background: #43515B; color: lightyellow;}

### Remarques

Les pseudo classes sont des sélecteurs simples car ils peuvent être utilisés seuls.

Dans l'exemple suivant tous les éléments qui sont le 1er enfant d'un parent quelconque sont entourés en rouge.

Exemple : simple pseudo classe
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
Fichier CSS : styles.css
/* Sélection de n'importe quel élément qui est le premier enfnat d'un autre */ :first-child { border: 3px solid red; }

On peut appliquer plusieurs pseudo classes à un même élément en les enchaînant comme dans l'exemple suivant qui génére un changement de couleur de fond quand la souris survole la première ligne d'une liste.

Exemple : pseudo classes enchaînées
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Star Wars - ze prélogie</h3> <h4>Personnages</h4> <ul> <li>Anakin Webwalker</li> <li>Padmé Amidala</li> <li>Yoda</li> <li>Obi Span Kenobi</li> </ul> <h4>Films</h4> <ol> <li>Le DOM fantôme</li> <li>L'attaque des .com</li> <li>La Revanche des Siths Web</li> </ol> </body> </html>
Fichier CSS : styles.css
/* Sélection des premieres lignes des listes et survol */ li:first-child:hover { background: red; }