Aller au contenu

Sélecteurs et classes

Les sélecteurs sont la manière dont CSS cible les éléments à styliser. Un sélecteur de classe cible les éléments avec un nom de classe spécifique ; les pseudo-classes ciblent les éléments dans des états spécifiques (comme :hover) ; les combinateurs ciblent les éléments en fonction de leur position dans l'arborescence. Maîtrisez les sélecteurs et vous contrôlez ce qui est stylisé et quand.

Silex utilise le nommage de classes BEM et le plugin Advanced Selectors pour vous permettre d'écrire des sélecteurs CSS visuellement. Au lieu de coder .card:hover { ... } à la main, vous choisissez la classe, l'état et l'effet -- l'éditeur génère le sélecteur pour vous.

Un élément titre sélectionné affichant son nom de classe BEM (.docs-hero__title) dans le Style Manager, avec le chemin de navigation Body → Main → Section → Div → Text en bas

Note : Silex prend actuellement en charge les sélecteurs jusqu'à la complexité des sélecteurs composés et des combinateurs. Pour une composition de sélecteurs avancée au-delà de BEM et des pseudo-classes de base, la fonctionnalité Tailwind CSS Support sur la feuille de route pourrait éventuellement fournir des raccourcis par classes utilitaires.

Comprendre les sélecteurs CSS

Un sélecteur CSS est un motif qui correspond à des éléments dans le HTML. Le plus simple est un sélecteur d'élément (par ex., p stylise tous les paragraphes). Mais le plus flexible est un sélecteur de classe (par ex., .button stylise tous les éléments avec class="button").

Silex encourage les sélecteurs de classe car ils sont réutilisables et ne dépendent pas de la structure HTML. Un sélecteur d'élément comme div styliserait chaque div, ce qui est trop large et fragile.

Nommer les classes avec BEM

BEM (Block, Element, Modifier) est une convention de nommage qui rend les noms de classes sémantiques et réutilisables. C'est simple :

  • Block : un composant autonome (par ex., .card, .button, .navbar)
  • Element : une partie d'un block (par ex., .card__title, .button__icon)
  • Modifier : une variante d'un block ou d'un element (par ex., .button--primary, .card--featured)

Exemple : 

.card { /* le block */ }
.card__title { /* titre à l'intérieur d'une carte */ }
.card__description { /* description à l'intérieur d'une carte */ }
.card--featured { /* une variante spéciale */ }
.card--featured .card__title { /* titre à l'intérieur d'une carte mise en avant */ }

Cette structure rend les classes auto-documentées. Quiconque lit .button--large sait qu'il s'agit d'une variante large d'un bouton. Cela évite aussi les conflits de nommage -- vous n'aurez pas accidentellement deux composants différents avec la même classe .title.

Appliquez BEM en nommant les classes dans Silex : 1. Sélectionnez un élément 2. Dans la zone de sélecteur en haut du panneau droit, cliquez sur + Add a new selector 3. Nommez-la selon BEM : .block, .block__element ou .block--modifier

Styliser les éléments dans différents états

Les éléments ont des états -- quand l'utilisateur survole, donne le focus, clique ou a déjà visité. Les pseudo-classes vous permettent de styliser en fonction de l'état.

Le plugin Advanced Selectors dans Silex expose de nombreuses pseudo-classes visuellement. Au lieu de taper :hover, vous le choisissez dans une liste déroulante.

Pseudo-classes courantes : - :hover -- quand l'utilisateur survole l'élément - :active -- quand l'utilisateur clique dessus - :focus -- quand l'élément a le focus clavier - :visited -- pour les liens que l'utilisateur a déjà visités - :first-child -- le premier enfant de son parent - :last-child -- le dernier enfant de son parent

Exemple : Styliser l'arrière-plan d'un bouton au survol :

  1. Sélectionnez l'élément bouton
  2. Dans le Style Manager, cliquez sur le bouton + Selector (ou utilisez la liste déroulante Advanced Selectors)
  3. Ajoutez .button:hover
  4. Définissez la couleur d'arrière-plan pour cet état

Le bouton change maintenant de couleur quand vous le survolez, et reste normal autrement.

La barre d'outils du sélecteur

La barre du sélecteur se trouve en haut à droite du Style Manager. Elle affiche le sélecteur courant (nom de classe ou sélecteur composé), un nombre de spécificité qui se met à jour dynamiquement lorsque vous construisez le sélecteur, et une rangée de boutons d'action :

Bouton Icône Action
Modifier Crayon Renommer ou modifier le sélecteur courant
Copier Presse-papiers Copier les styles de l'élément courant dans le presse-papiers (pour les coller sur un autre élément)
Coller Coller Appliquer les styles précédemment copiés à l'élément sélectionné
Effacer Balai Supprimer tous les styles du sélecteur courant
Aide Point d'interrogation Ouvrir la documentation sur les sélecteurs

Les classes sont affichées avec un préfixe en forme de puce (par ex., * my-class), tandis que les ID sont affichés avec un préfixe dièse (# my-id).

Sous le nom du sélecteur, vous voyez trois boutons pour étendre le sélecteur :

  • « + Add a new selector » -- ajoute une autre classe ou un autre ID au sélecteur courant.
  • « Pseudo Class » -- ouvre une liste déroulante avec toutes les pseudo-classes et pseudo-éléments disponibles (voir le tableau de référence ci-dessous). Chaque entrée dans la liste inclut un lien vers sa page de documentation MDN et un bouton de suppression pour le retirer.
  • « Relation » -- ouvre une liste déroulante pour ajouter un combinateur (descendant, enfant, frère adjacent ou frère général) au sélecteur.

Flux de travail copier/coller de styles : Pour appliquer les styles d'un élément à un autre, sélectionnez l'élément source, cliquez sur Copier dans la barre d'outils du sélecteur, puis sélectionnez l'élément cible et cliquez sur Coller. Cela copie toutes les déclarations de style du sélecteur source vers la cible.

Un élément sélectionné montrant sa classe .hero__title, avec les boutons de la barre d'outils du sélecteur : Modifier, Copier le style, Coller le style, Effacer le style et Aide

Le sélecteur montrant .hero__title:hover avec une liste déroulante de pseudo-classes disponibles (hover, active, focus, nth-child, etc.) et un lien vers la documentation MDN

Cibler les éléments par position

Les pseudo-classes peuvent aussi sélectionner en fonction de la position :

  • :nth-child(n) -- chaque nième enfant (par ex., :nth-child(2) est le deuxième enfant, :nth-child(2n) est chaque enfant pair)
  • :nth-of-type(n) -- chaque nième élément de ce type de balise
  • :only-child -- un élément sans aucun frère/soeur

Cas d'usage : Styliser une ligne sur deux dans un tableau avec un arrière-plan clair pour la lisibilité. Utilisez :nth-child(2n) pour sélectionner chaque deuxième ligne.

Utiliser les combinateurs pour cibler les éléments liés

Les combinateurs vous permettent de sélectionner des éléments en fonction de leur relation avec d'autres éléments. Le plugin Advanced Selectors prend en charge quatre combinateurs :

Combinateur Syntaxe Signification MDN
Descendant .parent .child Tout .child à l'intérieur de .parent (à n'importe quelle profondeur) lien
Enfant .parent > .child Uniquement les .child directs de .parent (un seul niveau) lien
Frère adjacent .item + .item Un .item immédiatement après un autre .item lien
Frère général .item ~ .item Tout .item qui suit un autre .item (à n'importe quelle distance) lien

Exemples :

Combinateur descendant : .card .title -- stylise tous les titres à l'intérieur des cartes (à n'importe quelle profondeur).

Combinateur enfant : .navbar > .item -- stylise les éléments qui sont des enfants directs de la barre de navigation (pas imbriqués plus profondément).

Frère adjacent : .input + .error -- stylise un message d'erreur qui suit immédiatement un champ de saisie.

Frère général : .item ~ .item -- stylise les éléments qui suivent un autre élément de la même classe (utile pour ajouter de l'espacement entre les frères).

Créer des sélecteurs complexes visuellement

Le plugin Advanced Selectors vous permet de construire des sélecteurs complexes sans code :

  1. Sélectionnez un élément, puis regardez la zone de sélecteur en haut du panneau droit
  2. Choisissez une classe de base (par ex., .button)
  3. Ajoutez des pseudo-classes (par ex., :hover)
  4. Ajoutez des combinateurs et des classes cibles si nécessaire (par ex., . > .icon)

L'interface génère le sélecteur complet pour vous : .button:hover > .icon.

Exemple étape par étape : styliser un lien après une icône

  1. Sélectionnez l'élément lien
  2. Cliquez sur + Selector
  3. Ajoutez la classe .nav-link
  4. Ajoutez le combinateur frère adjacent (+)
  5. Ajoutez la classe cible .nav-icon
  6. Définissez le style (par ex., margin, color)

Résultat : le sélecteur devient .nav-link + .nav-icon, qui cible l'icône de navigation immédiatement après un lien de navigation.

Exemple pratique : styliser un effet de survol sur une carte

Scénario : Vous avez des cartes avec une image, un titre et un bouton. Au survol, l'arrière-plan s'assombrit et le bouton apparaît.

  1. Créez un block de carte avec des classes BEM :
  2. .card (le block)
  3. .card__image (image à l'intérieur)

  4. .card__button (bouton à l'intérieur)

  5. Stylisez le bouton pour qu'il soit masqué par défaut :

  6. Sélectionnez .card__button

  7. Définissez Opacity sur 0 ou Display sur none

  8. Ajoutez un état de survol pour la carte :

  9. Sélectionnez la carte
  10. Ajoutez le sélecteur .card:hover

  11. Définissez Background-color sur une teinte plus foncée

  12. Ajoutez un état de survol pour le bouton :

  13. Sélectionnez le bouton
  14. Ajoutez le sélecteur .card:hover .card__button
  15. Définissez Opacity sur 1 ou Display sur flex (le rendant visible au survol)

Résultat : quand vous survolez la carte, l'arrière-plan change et le bouton apparaît en fondu -- tout en sélecteurs CSS, sans JavaScript nécessaire.

Éviter les pièges courants des sélecteurs

Utilisez des classes, pas des ID : Ne stylez pas par ID d'élément (#my-button). Les ID sont uniques et ne peuvent pas être réutilisés. Les classes sont réutilisables et sont l'outil approprié pour le CSS.

Évitez les sélecteurs descendants pour tout : .card .title .text sélectionne des éléments profondément imbriqués. C'est fragile -- si vous déplacez .text vers un autre parent, le sélecteur ne fonctionne plus. Utilisez les combinateurs de manière réfléchie et gardez les sélecteurs aussi courts que possible.

Ne sur-qualifiez pas les sélecteurs : .card.card--featured est redondant ; utilisez simplement .card--featured. La sur-qualification augmente la spécificité et rend le sélecteur plus difficile à surcharger par la suite.

Souvenez-vous de la spécificité : La spécificité d'un sélecteur détermine quelle règle l'emporte quand des styles entrent en conflit. Les sélecteurs de classe (.button) ont une spécificité inférieure aux sélecteurs d'attribut ([data-state="active"]). En général, gardez une spécificité basse et cohérente.

Erreurs courantes

  • Nommer les classes sans convention. Évitez les noms aléatoires comme .blue-box-thing. Utilisez BEM ou une autre convention pour que les classes soient prévisibles.
  • Appliquer les pseudo-classes au mauvais élément. :hover sur un enfant ne se déclenche pas au survol du parent. Utilisez les combinateurs pour styliser les éléments associés.
  • Oublier que CSS est en cascade. Les règles ultérieures remplacent les précédentes si la spécificité est égale. Placez les sélecteurs plus spécifiques en dernier dans votre feuille de style.
  • Utiliser les sélecteurs d'éléments pour le style. p { color: red; } stylise tous les paragraphes. C'est trop large. Utilisez des classes à la place.
  • Mélanger les classes BEM de manière incohérente. Si vous utilisez BEM pour certains composants et des noms aléatoires pour d'autres, votre base de code devient difficile à maintenir.

En savoir plus

Avancé : pseudo-éléments et sélecteurs imbriqués

Pseudo-éléments : ::before et ::after

Les pseudo-éléments créent du contenu qui n'est pas dans le HTML. Les deux plus courants sont :

  • ::before -- insère du contenu avant le contenu de l'élément
  • ::after -- insère du contenu après le contenu de l'élément

Vous devez définir la propriété content sur une chaîne ou none. Usages courants :

  • Icônes ou formes décoratives avant/après le texte
  • Guillemets autour des citations
  • Soulignements ou mises en évidence sur les titres

Exemple : Ajouter une ligne décorative avant un titre : 

.heading::before {
  content: "→ ";
  color: #0066cc;
}

Dans Silex, les pseudo-éléments apparaissent comme des sélecteurs (comme les pseudo-classes) et la propriété Content n'apparaît que lorsque vous sélectionnez un pseudo-élément.

Pseudo-classes relationnelles : :has, :is, :not, :where

Le CSS moderne inclut des pseudo-classes relationnelles qui simplifient les sélecteurs complexes :

  • :has() -- correspond à un élément qui a un descendant correspondant au sélecteur
  • :is() -- correspond à un élément qui correspond à l'un des sélecteurs
  • :not() -- correspond à un élément qui ne correspond pas au sélecteur
  • :where() -- comme :is() mais avec une spécificité nulle

Le plugin Advanced Selectors les prend en charge. Utilisez-les pour écrire des sélecteurs plus propres et plus puissants sans imbrication profonde.

Exemple : Styliser tous les éléments de liste sauf le dernier : 

li:not(:last-child) {
  border-bottom: 1px solid #e0e0e0;
}

Sélecteurs imbriqués (fonctionnalité future)

CSS Nesting (une fonctionnalité plus récente) vous permet d'écrire des sélecteurs dans une structure imbriquée, similaire à SCSS. Silex pourrait prendre cela en charge dans de futures versions, mais pour l'instant, écrivez des sélecteurs individuels pour chaque état ou relation.

Référence : toutes les pseudo-classes prises en charge dans Silex
Pseudo-classe Signification Support navigateur
:hover L'utilisateur survole l'élément Tous
:active L'utilisateur clique/appuie activement sur l'élément Tous
:focus L'élément a le focus clavier Tous
:focus-within L'élément ou l'un de ses descendants a le focus Tous
:focus-visible A le focus clavier et l'indicateur de focus est visible Navigateurs modernes
:visited Le lien a été visité Tous (style limité pour la sécurité)
:link Le lien n'a pas été visité Tous
:any-link Tout lien (visité ou non) Navigateurs modernes
:first-child Premier enfant du parent Tous
:last-child Dernier enfant du parent Tous
:nth-child(n) Nième enfant du parent Tous
:nth-last-child(n) Nième enfant depuis la fin Tous
:only-child Seul enfant du parent Tous
:first-of-type Premier élément de son type parmi les frères Tous
:last-of-type Dernier élément de son type parmi les frères Tous
:nth-of-type(n) Nième élément de ce type Tous
:nth-last-of-type(n) Nième élément de ce type depuis la fin Tous
:only-of-type Seul élément de son type parmi les frères Tous
:empty N'a pas d'enfants Tous
:root L'élément racine du document Tous
:scope L'élément de portée (généralement la racine) Navigateurs modernes
:target Élément ciblé par un fragment d'URL (#) Tous
:enabled L'élément de formulaire est activé Tous
:disabled L'élément de formulaire est désactivé Tous
:checked La case à cocher ou le bouton radio est coché Tous
:indeterminate Case à cocher ou bouton radio dans un état indéterminé Tous
:required Élément de formulaire avec l'attribut required Tous
:optional Élément de formulaire sans l'attribut required Tous
:lang() Élément avec une langue spécifique Tous
:dir() Élément avec une direction de texte spécifique (ltr/rtl) Navigateurs modernes
Pseudo-élément Signification Support navigateur
::before Insère du contenu avant le contenu de l'élément Tous
::after Insère du contenu après le contenu de l'élément Tous
::first-letter Stylise uniquement la première lettre Tous
::first-line Stylise uniquement la première ligne Tous
::selection Stylise le texte sélectionné (surligné) Tous

Quiz

Q1 : Vous voulez styliser un élément bouton que vous utiliserez sur tout votre site. Quel est le meilleur sélecteur ?

  • A) button (sélecteur d'élément)
  • B) #my-button (sélecteur d'ID)
  • C) .button (sélecteur de classe)
  • D) .button-element-primary (nom de classe long)
Réponse

C) .button (sélecteur de classe) -- les classes sont réutilisables et ne dépendent pas de la structure HTML. Les sélecteurs d'éléments sont trop larges ; les ID ne peuvent être utilisés qu'une seule fois et ne sont pas réutilisables.

Q2 : En suivant le nommage BEM, comment appelleriez-vous le titre à l'intérieur d'une carte ?

  • A) .card-title
  • B) .card__title
  • C) .card--title
  • D) .card.title
Réponse

B) .card__title -- BEM utilise des doubles underscores (__) pour les elements (parties d'un block) et des doubles tirets (--) pour les modifiers (variantes).

Q3 : Vous voulez styliser la couleur d'arrière-plan d'un bouton quand l'utilisateur le survole. Quel sélecteur devez-vous créer ?

  • A) .button
  • B) .button:hover
  • C) .button > .button:hover
  • D) .button + :hover
Réponse

B) .button:hover -- la pseudo-classe :hover sélectionne le bouton quand l'utilisateur le survole. Les combinateurs connectent plusieurs sélecteurs ; vous n'en avez pas besoin ici.

Q4 : Vous avez une liste d'éléments et voulez ajouter un border-bottom à tous les éléments sauf le dernier. Quel sélecteur est le meilleur ?

  • A) .item
  • B) .item:not(:last-child)
  • C) .item:last-child
  • D) .item ~ .item
Réponse

B) .item:not(:last-child) -- la pseudo-classe :not() exclut le dernier enfant. C'est plus propre qu'écrire des règles séparées pour .item et surcharger la dernière.

Q5 : Quelle est la différence entre le combinateur descendant (espace) et le combinateur enfant (>) ?

  • A) Ils font la même chose ; > est juste plus récent
  • B) L'espace sélectionne tout descendant ; > sélectionne uniquement les enfants directs
  • C) > sélectionne à n'importe quelle profondeur ; l'espace sélectionne un seul niveau
  • D) Il n'y a pas de différence dans le CSS moderne
Réponse

B) L'espace sélectionne tout descendant ; > sélectionne uniquement les enfants directs -- .card .title correspond à tout .title à l'intérieur de .card à n'importe quelle profondeur. .card > .title correspond uniquement aux éléments .title qui sont des enfants directs de .card.

Éditer cette page sur GitLab