:checked CSS sélecteur

Définition de la CSS :checked.

La pseudo-classe CSS :checked permet de cibler tous les éléments HTML INPUT dont l'attribut est type=radio ou type=checkbox ou les éléments HTML OPTION, qui sont sélectionnés (attribut checked ou selected), afin de leur assigner des propriétés CSS.

Exemple de syntaxe CSS :checked :

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

Exemple de code :checked CSS

Conditions d'application de la CSS :checked.

La pseudo-classe feuille de style :checked CSS s'applique sur la balise OPTION de la balise SELECT (X)HTML et sur la balise (X)HTML INPUT dont l'attribut es type=radio ou type=checkbox

Problème d'interprétation de :checked en Css.

La pseudo-classe CSS :checked n'est pas reconnue par Internet Explorer < 9, Safari < 3.1.
La pseudo-classe de feuille de style :checked CSS appliquée a la balise HTML OPTION posent des problèmes, il semble que le feuille de style soit appliquée a l'affichage puis ne fonctionne plus sous Chrome et Internet Explorer, les autres ne la reconnaissent pas (01/2015).

Règles de syntaxes CSS pour :checked.

Attention à l'écriture du sélecteur Css :checked

La pseudo-classe CSS :checked s'applique à trois types d'éléments très différents. 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 :checked.

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".

Code CSS :

.identifiant:checked{ /* Propriétés css */ }
#identifiant:checked{ /* 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".

Exemple de code :

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

Info complémentaire sur le sélecteur Css :checked

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

La pseudo-classe CSS :checked 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 :

Exemple d'écriture CSS :checked dans une balise STYLE

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

Compatibilités navigateurs du sélecteur :checked

Détails des versions de la CSS :checked: Sélecteur :checked css n'est pas compatible W3C; Sélecteur :checked est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS :checked: Sélecteur CSS :checked est compatible à partir de Chrome 1; Sélecteur CSS :checked est compatible à partir de Firefox 1; Sélecteur CSS :checked est compatible à partir de Internet Explorer 9; Sélecteur CSS :checked est compatible à partir de Opera 9; Sélecteur CSS :checked est compatible à partir de Safari 3.2

Votre avis sur la définition :checked en CSS

Votez pour la définition CSS `:checked`

Votes: 4.4 / 5 - 30 votes
Cliquez sur une étoile pour voter.