HOME > CSS

Pseudoklasa :has()Pseudoklasa

Pseudoklasa :has() jest selektorem CSS, który pozwala wybrać elementy, które posiadają określony element potomny. Selektor :has() jest dostępny w specyfikacji Selectors Level 4, więc nie jest obsługiwany we wszystkich przeglądarkach.

Przykład użycia:

article:has(h2) {
  background-color: lightgrey;
}

W tym przykładzie wszystkie elementy article, które posiadają element potomny o nazwie h2, zostaną oznaczone jasnoszarym kolorem tła.

Selektor :has() jest przydatny, gdy chcesz zmienić wygląd elementu w zależności od tego, czy posiada on pewne elementy potomne. Możesz również użyć selektora :has() z selektorami atrybutów, takimi jak [attr], aby wybrać elementy, które posiadają określone atrybuty lub atrybuty o określonej wartości.

Oto kilka innych przykładów użycia:

/* Wybierz elementy div, które posiadają elementy p */
div:has(p) {
  font-size: larger;
}

/* Wybierz elementy li, które posiadają elementy a z atrybutem href */
li:has(a[href]) {
  color: blue;
}

/* Wybierz elementy span, które posiadają elementy em */
span:has(em) {
  font-style: italic;
}

/* Wybierz elementy div, które posiadają elementy p z atrybutem class o wartości "warning" */
div:has(p[class="warning"]) {
  background-color: yellow;
}

Oczywiście możesz również łączyć selektor :has() z innymi selektorami, aby uzyskać jeszcze bardziej szczegółowe wybory.

Podobne artykuły