:state()

Syntaxe

:state(<custom identifier>) {
  /* ... */
}

Paramètres

La pseudo-classe :state() prend en argument un identifiant personnalisé qui représente l'état de l'élément personnalisé à correspondre.

Description

Les éléments peuvent passer d'un état à un autre en raison de l'interaction de l'utilisateur·ice et d'autres facteurs. Par exemple, un élément peut être dans l'état "hover" lorsqu'un·e utilisateur·ice survole l'élément, ou un lien peut être dans l'état "visited" après qu'un·e utilisateur·ice a cliqué dessus. Les éléments fournis par les navigateurs peuvent être stylisés en fonction de ces états à l'aide de pseudo-classes CSS telles que :hover et :visited. De même, les éléments personnalisés autonomes (éléments personnalisés qui ne sont pas dérivés d'éléments intégrés) peuvent exposer leurs états, permettant aux pages qui utilisent les éléments de les mettre en forme à l'aide de la pseudo-classe CSS :state().

Les états d'un élément personnalisé sont représentés par des valeurs de chaîne. Ces valeurs sont ajoutées ou supprimées d'un objet CustomStateSet associé à l'élément. La pseudo-classe CSS :state() correspond à un élément lorsque l'identifiant, passé en argument, est présent dans le CustomStateSet de l'élément.

La pseudo-classe :state() peut également être utilisée pour correspondre à des états personnalisés dans l'implémentation d'un élément personnalisé. Cela se fait en utilisant :state() dans la fonction pseudo-classe :host(), qui correspond à un état uniquement dans le shadow DOM de l'élément personnalisé actuel.

De plus, le pseudo-élément ::part() suivi de la pseudo-classe :state() permet de correspondre aux parties fantôme d'un élément personnalisé qui sont dans un état particulier. (Les parties fantôme sont des parties de l'arbre fantôme d'un élément personnalisé qui sont explicitement exposées à une page contenant à des fins de style.)

Exemples

Correspondance d'un état personnalisé

Ce CSS montre comment changer la bordure de l'élément personnalisé autonome <labeled-checkbox> en rouge lorsqu'il est dans l'état « checked ».

labeled-checkbox {
  border: dashed red;
}
labeled-checkbox:state(checked) {
  border: solid;
}

Pour un exemple en direct de ce code en action, consultez l'exemple Correspondance avec l'état personnalisé d'un élément de case à cocher personnalisé sur la page CustomStateSet.

Correspondance d'un état personnalisé dans le DOM fantôme d'un élément personnalisé

Cet exemple montre comment la pseudo-classe :state() peut être utilisée dans la fonction pseudo-classe :host() pour correspondre à des états personnalisés dans l'implémentation d'un élément personnalisé.

Le CSS suivant injecte un [x] gris avant l'élément lorsqu'il est dans l'état « checked ».

:host(:state(checked))::before {
  content: "[x]";
}

Pour un exemple en direct de ce code en action, consultez l'exemple Correspondance avec l'état personnalisé d'un élément de case à cocher personnalisé sur la page CustomStateSet.

Correspondance d'un état personnalisé dans une partie fantôme

Cet exemple montre comment la pseudo-classe :state() peut être utilisée pour cibler les parties fantôme d'un élément personnalisé.

Les parties fantôme sont définies et nommées à l'aide de l'attribut part. Par exemple, considérons un élément personnalisé nommé <question-box> qui utilise un élément personnalisé <labeled-checkbox> comme partie fantôme nommée checkbox :

shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;

Le CSS ci-dessous montre comment le pseudo-élément ::part() peut être utilisé pour correspondre à la partie fantôme de 'checkbox'. Il montre ensuite comment le pseudo-élément ::part() suivi de la pseudo-classe :state() peut être utilisé pour correspondre à la même partie lorsqu'elle est dans l'état checked.

question-box::part(checkbox) {
  color: red;
}

question-box::part(checkbox):state(checked) {
  color: green;
  outline: dashed 1px green;
}

Pour un exemple en direct de ce code en action, consultez l'exemple Correspondance d'un état personnalisé dans une partie masquée d'un élément personnalisé sur la page CustomStateSet.

Spécifications

Compatibilité des navigateurs

Voir aussi

• CustomStateSet
• Les pseudo-classes
• Apprendre : pseudo-classes et pseudo-éléments
• États personnalisés et sélecteurs CSS de pseudo-classes d'états personnalisés dans l'Utilisation d'éléments personnalisés