Supporté par ChromeSupporté par FirefoxSupporté par EdgeSupporté par Safari/iOS 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

Notes sur le tuto


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.

Can I Use css-optional-pseudo? Data on support for the css-optional-pseudo feature across the major browsers from caniuse.com.