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

Bien que cette méthode est fonctionnelle et simple, il est déconseillé de styler un élément en fonction de sa balise, afin de garder une distinction entre son rôle sémantique et son apparence. 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.

Styler un élément en fonction de son id est généralement une mauvaise idée. Même si un élément est unique actuellement, rien ne garantit qu’il le sera toujours. 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.

Les classes existent spécifiquement pour styliser des éléments. Elles sont performantes, flexibles et réutilisables. Utilisez-les! 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.

OUTIL Selectors explained Traduire ses sélecteurs CSS en texte humainement lisible afin de valider leur portée.

EXERCICE CSS Diner - Niveaux 1 à 8 Complétez les 8 premiers niveaux de CSS Diner 🍎