Aide-mémoire des sélecteurs CSS avec testeur en direct
Testeur et aide-mémoire des sélecteurs CSS
Aide-mémoire des sélecteurs CSS : testeur en direct, nth-child, ::before | We.Inc
Saisissez n'importe quel sélecteur CSS et voyez quels éléments il cible dans une page d'exemple, avec sa spécificité. Inclut tous les groupes de sélecteurs, un calculateur de formule nth-child, des recettes ::before et ::after et :has().
Les sélecteurs indiquent à CSS à quels éléments une règle s'applique. Les principaux sont le type (p), la classe (.card), l'ID (#main), l'attribut ([type=email]), les combinateurs (descendant avec une espace, enfant >, frères + et ~), les pseudo-classes comme :hover et :nth-child(2n), et les pseudo-éléments comme ::before. Saisissez un sélecteur ci-dessous pour voir ce qu'il cible.
Les sélecteurs à la base de la plupart des feuilles de style
Sélecteur
Cible
Spécificité
Chaque élément p
.card
Les éléments avec la classe card
L'élément dont l'id est main
nav a
Les a n'importe où dans nav
ul > li
Les li enfants directs de ul
a:hover
Un lien sous le pointeur
Lire un tableau de sélecteurs a ses limites. Le testeur ci-dessous passe votre sélecteur dans le moteur même du navigateur sur une petite page d'exemple, met en surbrillance chaque élément ciblé, explique les saisies invalides et calcule la spécificité. Le calculateur en dessous répond à l'éternelle question : quels éléments 3n+1 sélectionne-t-il vraiment ?
Saisissez un sélecteur dans le testeur, ou cliquez sur un des exemples pour le charger.
Les éléments ciblés dans la page d'exemple s'illuminent, et le compteur se met à jour pendant la saisie.
Lisez le score de spécificité comme trois nombres : les ID, puis les classes et assimilés, puis les types d'éléments.
Utilisez le calculateur nth-child pour tester n'importe quelle formule An+B sur une liste de 30 éléments maximum.
Stylez avec des classes plutôt qu'avec des ID. Une classe garde une spécificité basse, donc les règles suivantes et les classes utilitaires peuvent encore la surcharger.
Utilisez :focus-visible au lieu de :focus pour les contours de focus. Le contour s'affiche pour les utilisateurs du clavier sans clignoter à chaque clic de souris.
::before et ::after ont besoin d'une propriété content, même une chaîne vide, sinon ils ne sont pas générés du tout.
Regroupez les longues listes de sélecteurs dans :is() pour les raccourcir, ou dans :where() si vous voulez qu'elles aient une spécificité nulle.
Questions fréquentes
Quelle est la différence entre nth-child et nth-of-type ?
:nth-child(2) compte tous les éléments frères, puis vérifie que le deuxième correspond aussi au reste du sélecteur. :nth-of-type(2) ne compte que les frères de la même balise. Ainsi, p:nth-child(2) ne cible rien si le deuxième enfant est un h2, alors que p:nth-of-type(2) trouve quand même le deuxième paragraphe.
Quelle est la différence entre ::before et :before ?
C'est le même pseudo-élément. Le double deux-points a été introduit pour distinguer les pseudo-éléments des pseudo-classes, et les navigateurs acceptent toujours le simple deux-points pour les quatre plus anciens (before, after, first-line, first-letter) par rétrocompatibilité. Écrivez le double deux-points dans le nouveau code.
À quoi sert :has() ?
:has() cible un élément selon ce qu'il contient ou ce qui le suit, par exemple .card:has(img) stylise les cartes qui contiennent une image, et label:has(+ input:invalid) stylise un label placé avant un champ invalide. Il est pris en charge par tous les grands navigateurs actuels, Firefox ayant été le dernier à l'ajouter fin 2023.
Comment la spécificité est-elle calculée ?
Comptez trois choses : les sélecteurs d'ID ; les classes, sélecteurs d'attribut et pseudo-classes ; puis les sélecteurs de type et pseudo-éléments. Comparez de gauche à droite, donc un seul ID l'emporte sur n'importe quel nombre de classes. :where() n'ajoute rien, tandis que :is(), :not() et :has() prennent le score de leur argument le plus spécifique. Les styles en ligne et !important passent au-dessus de tout cela.
Pourquoi mon style :hover ne s'affiche-t-il pas sur mobile ?
Les écrans tactiles n'ont pas d'état de survol, donc les navigateurs l'ignorent ou l'appliquent brièvement après un appui. Placez les styles réservés au survol dans @media (hover: hover) et assurez-vous que tout ce qui apparaît au survol est aussi accessible par appui et au clavier.
Comment le navigateur lit un sélecteur
Les navigateurs évaluent les sélecteurs de droite à gauche. Pour nav ul li a, le moteur part de chaque lien de la page, puis remonte pour vérifier la présence d'un li, d'un ul et d'un nav. C'est pourquoi la partie la plus à droite, appelée sélecteur clé, compte le plus pour la vitesse, même si sur des pages normales la vitesse des sélecteurs pose rarement un vrai problème.
Une virgule crée une liste de sélecteurs, c'est-à-dire plusieurs sélecteurs qui partagent une même règle. Si l'un d'eux est invalide, toute la règle est ignorée, sauf à l'intérieur de :is() et :where(), qui tolèrent les entrées invalides.
Pseudo-classes et pseudo-éléments
Une pseudo-classe, écrite avec un deux-points, sélectionne un élément existant dans un état ou une position donnés : :hover, :checked, :first-child, :empty. Un pseudo-élément, écrit avec deux deux-points, crée ou cible une partie qui n'est pas un élément à part entière dans le HTML : ::before, ::placeholder, ::selection, ::marker.
Un seul pseudo-élément est autorisé par sélecteur composé, et il doit venir en dernier. Le contenu ajouté via ::before et ::after est généralement lu par les lecteurs d'écran mais ne peut être ni sélectionné ni copié, alors n'y placez pas d'informations essentielles.
Garder la spécificité sous contrôle
La plupart des conflits de spécificité commencent quand un ID ou une longue chaîne de sélecteurs imbriqués l'emporte sur une règle plus simple écrite plus tard. Des noms de classe plats, sur un ou deux niveaux au maximum, gardent chaque règle facile à surcharger.
Les couches de cascade (@layer) offrent un autre outil : les règles d'une couche ultérieure l'emportent sur celles d'une couche antérieure, quelle que soit la spécificité. Les resets et les styles tiers peuvent vivre dans une couche basse pour que vos propres classes gagnent toujours.
Sélecteurs de base et d'attribut
Sélecteurs simples
Sélecteur
Exemple
Cible
Tous les éléments
Type
Tous les éléments button
Classe
.price
class contient price
ID
id vaut checkout
Attribut présent
[disabled]
Possède l'attribut, quelle que soit sa valeur
Valeur exacte
[type="email"]
La valeur est exactement email
Commence par
[href^="https"]
La valeur commence par https
Se termine par
[href$=".pdf"]
La valeur se termine par .pdf
Contient
[class*="btn"]
La valeur contient btn n'importe où
Mot dans une liste
[rel~="noopener"]
La liste séparée par des espaces contient le mot
Préfixe de langue
[lang|="en"]
en, ou en- suivi de n'importe quoi
Insensible à la casse
[href$=".PDF" i]
Cible .pdf, .PDF, etc.
Combinateurs
Relations entre éléments
Combinateur
Exemple
Cible
Descendant (espace)
nav a
Les a à n'importe quelle profondeur dans nav
Enfant >
ul > li
Les li directement dans ul
Frère suivant +
Le p situé juste après un h2
Frères suivants ~
Chaque p après un h2 ayant le même parent
Liste de sélecteurs ,
L'un ou l'autre
Pseudo-classes
État, structure et logique
Pseudo-classe
Cible
:hover
Sous le pointeur de la souris
:focus
A le focus, au clavier ou par programme
:focus-visible
A le focus et le navigateur estime qu'un contour doit s'afficher
:focus-within
L'élément ou un descendant a le focus
:active
En cours d'appui
:visited
Un lien déjà visité (stylisation limitée pour la confidentialité)
:checked / :disabled / :required
Les contrôles de formulaire dans cet état
:valid / :invalid / :user-invalid
États de validation de formulaire ; user-invalid attend une interaction
:placeholder-shown
Un champ qui affiche actuellement son placeholder
:first-child / :last-child / :only-child
Position parmi les frères
:nth-child(An+B) / :nth-last-child()
Position selon une formule, en comptant tous les frères
:nth-of-type() / :first-of-type
Position en ne comptant que la même balise
:empty
Aucun enfant et aucun texte
:not(x)
Ne correspond pas à x
:is(x, y) / :where(x, y)
Correspond à l'un des éléments de la liste ; where a une spécificité nulle
:has(x)
Contient, ou est suivi par, quelque chose qui correspond à x
:root
L'élément html
:target
L'élément dont l'id figure dans le hash de l'URL
Pseudo-éléments et recettes ::before / ::after
Parties d'un élément
Pseudo-élément
Cible
::before / ::after
Contenu généré avant ou après le contenu de l'élément
::first-letter / ::first-line
Première lettre ou première ligne affichée d'un bloc
::placeholder
Texte du placeholder dans un champ
::selection
Texte surligné par l'utilisateur
::marker
La puce ou le numéro d'un élément de liste
::file-selector-button
Le bouton d'un champ de fichier
::backdrop
La couche derrière une boîte de dialogue modale ou un élément en plein écran
Astérisque obligatoire, icône de lien externe et guillemet
Chaque décoration vit dans le CSS, donc le HTML reste propre. content est obligatoire pour les deux pseudo-éléments.
:hover, :focus-visible et :has() ensemble
Passez dans le champ avec Tab pour voir le contour. La carte devient rouge uniquement quand elle contient un e-mail invalide.
Accueil
Site partenaire
Menu
Plats de saison, renouvelés chaque semaine.
Renseignez-vous sur les allergènes.
Soupe
Salade
Risotto
Tarte
Café
Nom
Remarque
Testeur de sélecteurs
Sélecteur
Exemples de sélecteurs
Ce sélecteur n'est pas valide dans ce navigateur.
{n} élément ciblé
{n} éléments ciblés
La spécificité se lit ID, classes, types. Le troisième élément, Risotto, a la classe featured ; le premier paragraphe a l'id intro.
Calculateur nth-child
Formule dans :nth-child( )
Nombre d'éléments : {n}
Exemples de formules
Utilisez une forme comme 2n+1, -n+3, odd, even ou un simple nombre.