Pseudo-classes CSS : Démo HTML5
Mise à jour : 2017-01-22
Une pseudo-classe CSS est un mot clé ajouté à un selecteur CSS,
qui définit un état spécial de l'élément.
Par exemple pour appliquer un style différent lorsque l'élément désigné par un sélecteur CSS est survolé (:hover).
Pseudo-classes CSS
- :optional : Style un champ optionnel.
- :required : Style un champ obligatoire.
- :invalid : Style pris lorsque le champ devient invalide.
- :fullscreen : Style un objet en plein écran (encore en brouillon).
- ...
Notes sur le tuto
- Le validateur CSS du W3C ne reconnait pas encore ces pseudo-classes.
- Limitations :
- Chrome (de manière changeante d'une version à l'autre) n'interprète pas l'attribut "required" sur un <input> de type "text" sauf lorsqu'il a obtenu le focus une première fois et restituent la pseudo-classe CSS "optional" avant cela.
- Opera n'interprète pas l'attribut "required" sur un <input> de type "time" et ne restitue aucune pseudo-classe pour ce type.
- Article et démo sur la pseudo-classe :fullscreen sur Codrops CSS Reference.
- Voir aussi :
Exemple de code HTML5
<!--_pseudo-class.css input:optional {background-color: silver} input:required {background-color: fuchsia} input:invalid {background-color: red} --> <input type="text" value="optional"><br> <br> <input type="search" value="required search" required> <input type="text" value="required text" required> <input type="time" value="06:06" required><br> <br> <input type="text" value="lettres9" pattern="[ a-zA-Z]*"> Effacez le chiffre, pour rendre ce champ valide.
Démonstration du résultat HTML5
Effacez le chiffre, pour rendre ce champ valide.