Sélecteurs

Les sélecteurs CSS permettent de cibler des éléments dans une page afin de leur appliquer des styles. Ainsi il est possible d'améliorer leur lisibilité ou de leur donner une personnalité.

Type

Les sélecteurs de type ciblent les éléments en fonction d'une balise.

Par exemple, la règle suivante:

em { ... }

Permet de sélectionner les éléments utilisant la balise <em>.

ID

Les sélecteurs d'identifiant unique ou ID, permettent de cibler un élément en fonction de son id.

Par exemple, la règle suivante:

#no1 { ... }

Permet de modifier l'apparence de l'élément ayant l'id no1.

Classe

Les sélecteurs de classe ciblent les éléments partageant une classe commune.

Par exemple, la règle suivante:

.element { ... }

Permet de sélectionner tous les éléments partageant la classe element.

Combinaisons

Lorsque deux sélecteurs sont collés (sans espace entre eux), seuls les éléments possédant les deux sélecteurs sont retournés.

Par exemple, la règle suivante:

span.element { ... }

Permet de sélectionner les éléments avec la classe .element, mais uniquement si la classe est appliquée sur un <span>.

Un élément peut avoir plusieurs classes.

Par exemple, <div class="msg important"> cet élément possède la classe .msg, ainsi que la classe .important. Il est donc possible de sélectionner uniquement les messages qui possèdent ces deux classes avec .msg.important { ... }

Descendants

À l'opposée des combinaisons, les descendants ont un espace entre les sélecteurs permettant ainsi d'indiquer que seuls les descendants du premier sélecteur devraient être ciblés.

Par exemple, la règle suivante:

.group .element { ... }

Permet de sélectionner les éléments avec la classe .element, mais uniquement s'ils sont enfants d'une balise possédant la classe .group.

Dans l'exemple précédent, .group est ce que l'on appel le parent de .element.

Cependant, plusieurs balises auraient pu séparer .group de ses descendants .element sans problème. Tout comme plusieurs générations peuvent séparer une personne de ses ancètres, elle n'en reste pas moins sa descendance.