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 ensemble 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 éléments sans rapport 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 :

Sélectionnez l'élément bouton
Dans la zone du sélecteur, cliquez sur + (Add a new selector) et tapez button, sans le point : l'élément reçoit la classe .button
Cliquez sur Pseudo Class et choisissez hover : le sélecteur devient .button:hover
Définissez la couleur d'arrière-plan pour cet état

Taper directement .button:hover dans le champ + est refusé comme sélecteur invalide.

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
Edit selector	Crayon	Renommer ou modifier le sélecteur courant
Copy style	Presse-papiers	Copier les styles de l'élément courant dans le presse-papiers (pour les coller sur un autre élément)
Paste style	Coller	Appliquer les styles précédemment copiés à l'élément sélectionné
Clear style for this selector	Balai	Supprimer tous les styles du sélecteur courant
Help	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. Chaque entrée dans la liste inclut un lien vers sa page de documentation MDN et un bouton de suppression pour le retirer.
« Relation » -- ajoute une ligne « When it is inside of » avec un menu de huit relations : inside of, direct child of ( > ), adjacent to ( + ), after ( ~ ), contains ( :has ), does not match ( :not ), matches ( :is ) et matches ( :where ). Dans le champ en dessous, cliquez sur + et tapez la classe de l'autre élément. Avec les quatre combinateurs ci-dessous, cet autre élément vient en premier dans le sélecteur : l'élément sélectionné est toujours celui que vous stylez.

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 Copy style dans la barre d'outils du sélecteur, puis sélectionnez l'élément cible et cliquez sur Paste style. 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 : Edit selector, Copy style, Paste style, Clear style for this selector et Help

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. Dans le menu Relation, les quatre combinateurs ci-dessous sont écrits sous forme de phrases :

Combinateur	Syntaxe	Signification	MDN
Descendant (inside of)	`.parent .child`	Tout `.child` à l'intérieur de `.parent` (à n'importe quelle profondeur)	lien
Enfant (direct child of)	`.parent > .child`	Uniquement les `.child` directs de `.parent` (un seul niveau)	lien
Frère adjacent (adjacent to)	`.item + .item`	Un `.item` immédiatement après un autre `.item`	lien
Frère général (after)	`.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 :

Sélectionnez l'élément à styliser (par ex., une icône dans un bouton), puis regardez la zone de sélecteur en haut du panneau droit
Cliquez sur + et tapez icon
Cliquez sur Relation et choisissez direct child of ( > )
Dans le champ en dessous, cliquez sur + et tapez la classe de l'autre élément (button), puis cliquez sur Pseudo Class sous ce champ et choisissez hover

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

Sélectionnez l'élément lien
Dans la zone du sélecteur, cliquez sur + et tapez nav-link
Cliquez sur Relation et choisissez adjacent to ( + )
Dans le champ en dessous, cliquez sur + et tapez nav-icon
Définissez le style (par ex., margin, color)

Résultat : le sélecteur devient .nav-icon + .nav-link, qui cible le lien de navigation immédiatement après une icône 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.

Créez un block de carte avec des classes BEM. Construisez un Container avec une Image, un Text et un Button à l'intérieur, puis sélectionnez chaque élément, cliquez sur + (Add a new selector) dans la zone des sélecteurs et tapez sa classe :
.card (le block)
.card__image (image à l'intérieur)
.card__button (bouton à l'intérieur)

Dès qu'un élément a une classe, le panneau Style stylise la classe (son ID est grisé).

Stylisez le bouton pour qu'il soit masqué par défaut :
Sélectionnez .card__button
Définissez Opacity sur 0 ou Display sur none
Ajoutez un état de survol pour la carte :
Sélectionnez la carte
Cliquez sur Pseudo Class et choisissez hover : le sélecteur devient .card:hover
Définissez Background-color sur une teinte plus foncée
Ajoutez un état de survol pour le bouton :
Sélectionnez le bouton
Cliquez sur Relation : une ligne « When it is inside of » apparaît. Dans le champ de sélecteur en dessous, cliquez sur + et tapez card, puis cliquez sur le Pseudo Class sous ce champ et choisissez hover
Le sélecteur devient .card:hover .card__button
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. Vérifiez-le en Preview (l'icône œil de la barre du haut).

La pseudo-classe reste sur le sélecteur de la carte : la prochaine fois que vous sélectionnez la carte, le panneau Style modifie encore .card:hover. Retirez hover (×) avant de styliser à nouveau la carte elle-même.

La carte en mode aperçu, survolée : son fond est plus foncé et le bouton Learn more est visible

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

Les attributs personnalisés ont besoin du préfixe data- : Silex accepte les sélecteurs d'attribut pour les attributs HTML standards, avec ou sans valeur ([title="intro"]), et pour les attributs data-* sans valeur ([data-state]). [data-state="active"] est refusé comme sélecteur invalide, comme les attributs personnalisés sans le préfixe data- : utilisez [data-myattr] au lieu de [myattr].

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) et d'attribut ([data-state]) ont la même spécificité, et un ID (#my-button) a une spécificité plus haute. 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 éléments et des noms aléatoires pour d'autres, votre base de code devient difficile à maintenir.

En savoir plus¶

Présentation complète — commentée, en anglais :

MDN : Sélecteurs CSS -- référence complète
MDN : Pseudo-classes -- toutes les pseudo-classes disponibles
MDN : Combinateurs -- référence détaillée des combinateurs
Méthodologie BEM -- documentation officielle BEM
MDN : Spécificité -- comment CSS décide quelle règle l'emporte
Tailwind CSS Support -- votez pour des alternatives par classes utilitaires
Couleurs et arrière-plans -- là où les sélecteurs sont le plus souvent utilisés
Positionnement -- utiliser les pseudo-éléments comme ::before et ::after
Navigation au clavier et focus -- styliser :focus et :focus-visible pour l'accessibilité

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