Pseudo-classe :has() CSS

Définition et utilisation

CSS :has() Les pseudo-classes sont utilisées pour correspondre à tout parent qui a un élément frère spécifique ou un élément interne spécifique.

Exemples d'utilisation :

• Masquer ou afficher un élément en fonction d'un élément frère spécifique ou d'un contenu interne
• Modifier la mise en page si un contenu spécifique existe
• Faire apparaître une apparence différente si l'élément parent a un élément frère spécifique ou un contenu interne

Exemple

Exemple 1

Définir le style des éléments <h2> suivant immédiatement après l'élément <p>:

h2:has(+ p) {
  color: gray;
  background-color: gold;
  border: 2px dotted red;
}

Essayer par vous-même

Exemple 2

Définir le style des éléments <section> contenant l'élément <h1> et des éléments <section> contenant la classe 'funfact':

section:has(h1) {
  background-color: gold;
}
section:has(.funfact) {
  color: blue;
}

Essayer par vous-même

Exemple 3

Définir le style des éléments <li> contenant l'élément <input> sélectionné (dans <ul>):

ul li:has(input:checked) {
  border:2px solid maroon;
}

Essayer par vous-même

Grammaire CSS

:has(relative-selector-list) {
  déclarations css;
}

Détails techniques

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur qui prend en charge le pseudo-classe pour la première fois.