Sélecteurs

3

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

Voir le CodePen de Simon Arnold (@smnarnold).

Bien que cette méthode est fonctionnelle et peut paraître simple et efficace, 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.

Voir le CodePen de Simon Arnold (@smnarnold).

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 restera dans le futur.

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Complétez les 8 premiers niveaux de CSS Diner 🍎

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme