Définition de la CSS :valid.
La pseudo-classe de Validation CSS :valid permet de cibler les éléments (X)HTML de formulaire qui est soumis à une validation et dont la valeur attendue est valide, afin de leur assigner des propriétés CSS.
La balise (X)HTML FIELDSET et FORM sont aussi ciblées, si tous les éléments de formulaire qu'elles contiennent sont validés.
:valid ::valid {
/* Propriétés */
}
identifiant:valid {
/* Propriétés */
}Conditions d'application de la CSS :valid.
La pseudo-classe feuille de style :valid CSS s'applique sur la balise (X)HTML FORM, FIELDSET, INPUT et SELECT et TEXTAREA.
Leurs attributs ou propriétés disabled ou readonly ne doivent pas être activé.
La pseudo-classe de feuille de style :valid CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE.
La pseudo-classe CSS :valid doit être déclarée dans une balise HTML ou XHTML STYLE.
Problème d'interprétation de :valid en Css.
La pseudo-classe CSS :valid pose des problèmes sur les balises form et fieldset qui ne sont pas prises en compte sur certains navigateurs (09-2016).
Règles de syntaxes CSS pour :valid.
Info complémentaire sur :valid
Attention, la pseudo-classe CSS ":valid" a une écriture un peu spéciale, "valid" est toujours précédée de ":".
La pseudo-classe CSS :valid 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:valid{}
</STYLE>Attention à l'écriture de :valid
La pseudo-classe CSS :valid s'applique sur différents types d'élément HTML ou XHTML acceptant l'attribut valid. 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 :valid.
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:valid{ /* Propriétés css */ }
#identifiant:valid{ /* 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"..identifiant :valid{ /* Propriétés css */ }
#identifiant :valid{ /* Propriétés css */ }
Quand un champ de formulaire est-il soumis à 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 :valid
- Détails des versions de la CSS :valid
- Sélecteur
:validcss n'est pas compatible W3C - Sélecteur
:validest compatible avec CSS4 et plus.
Votre avis sur la définition :valid en CSS
Votez pour la définition CSS :valid
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 5 / 5 - 1
vote
Cliquez sur une étoile pour voter.