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.

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.

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.

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:visitedqui 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é.

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.

Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.

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).

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

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.

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

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

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.

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é.

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.

Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.

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.

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.

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

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

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.