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.
