Le :invalidsélecteur vous permet de sélectionner des éléments qui ne contiennent pas de contenu valide, tel que déterminé par son typeattribut. :invalidest défini dans la spécification CSS Selectors Level 3 comme un «pseudo-sélecteur de validité», ce qui signifie qu'il est utilisé pour styliser des éléments interactifs en fonction d'une évaluation de l'entrée utilisateur.
Ce sélecteur a une utilité particulière: fournir à un utilisateur des commentaires lorsqu'il interagit avec un formulaire sur la page. L'exemple ci-dessous utilise CSS pour transformer les champs «E-mail» en rouge ou en vert, en réponse à la question de savoir si le contenu correspond à un modèle d'adresse e-mail valide:
Notez comment le premier («Email») est vert-valide-même s'il n'y a pas de contenu dans le champ. C'est parce que l'entrée est facultative, donc le laisser vide entraînerait une soumission de formulaire valide. Pour corriger ce problème, le second a un attribut «obligatoire», ce qui signifie qu'un champ vide entraînerait une soumission de formulaire non valide.
Points d'interêts
:invalidpeuvent être «enchaînés» avec d'autres pseudo-sélecteurs: comme:focuspour valider uniquement lorsque l'utilisateur tape,:beforeou:afterpour générer des icônes ou du texte pour fournir plus de commentaires à l'utilisateur, ou des sélecteurs d'attributs aimentinput(value="")valider uniquement les champs de saisie contenant du contenu.
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| 10,0+ | 5.0+ | 4.0+ | 10,0+ | 10+ | non | non |
:invalida été introduit dans CSS Selectors Module 3, ce qui signifie que les anciennes versions des navigateurs ne le prennent pas en charge. Cependant, la prise en charge des navigateurs modernes s'améliore. Si vous avez besoin d'un support de navigateur plus ancien, utilisez polyfill ou utilisez ces sélecteurs de manière non critique à une amélioration progressive, ce qui est recommandé.