:invalid CSS sélecteur

:invalid {
  /* Propriétés */
}
identifiant:invalid {
  /* Propriétés */
}

Règles de syntaxes CSS pour :invalid.

Info complémentaire sur le sélécteur Css :invalid

Attention, la pseudo-classe CSS ":invalid" a une écriture un peu spéciale, "invalid" est toujours précédée de ":".

La pseudo-classe CSS :invalid ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "STYLE" de votre page :

<STYLE>
  input:invalid{}
</STYLE>

Attention à l'écriture du sélécteur Css :invalid

La pseudo-classe CSS :invalid s'applique sur différents types d'élément HTML ou XHTML acceptant l'attribut invalid. Vous pouvez donc si nécessaire mettre un sélecteur devant pour un ciblage plus précis, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML acceptant :invalid.

Dans le cas ci-dessous l'identifiant est collé à ":". Dans ce cas nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML qui ont "identifiant".

.identifiant:invalid{ /* Propriétés css */ }
#identifiant:invalid{ /* Propriétés css */ }

Dans le cas ci-dessous l'identifiant est espacé de ":". Dans ce cas nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML dont le parent direct ou indirect est "identifiant".

Quand un champ de formulaire est il soumit à une validation?

Pour les balises (X)HTML de formulaire, c'est la présence de certains attributs qui vont déterminer si le champ est soumis à une validation.
Par exemple si l'attribut est présent :
required, min, max, ...

Pour les balises (X)HTML INPUT la valeur de l'attribut type peut déterminer si le champ est soumis à une validation.
Par exemple si le type est :
number, email, date, ...

Compatibilités navigateurs du sélecteur :invalid

Votre avis sur la définition :invalid en CSS