Pseudoklasa relacyjna :has()

Pseudoklasa :has() wybiera element, jeśli zawiera element potomny pasujący do argumentu. Często nazywana „selektorem rodzica” umożliwia stylowanie elementu nadrzędnego na podstawie jego elementów potomnych — jest to możliwość, której wcześniej CSS nie oferował.

.card:has(img) wybiera dowolny element .card, który zawiera element potomny img. Argument jest listą selektorów względnych — dowolnymi poprawnymi selektorami CSS opisującymi elementy względem elementu będącego przedmiotem selekcji.

Można stylować kontener formularza, gdy zawiera nieprawidłowe pole: form:has(:invalid) { border-color: red; }. Można też stylować sekcję zawierającą nagłówek: section:has(h2) { padding-top: 2rem; }. Element nadrzędny zmienia wygląd na podstawie stanu elementu potomnego.

:has() może wybierać poprzedzające elementy rodzeństwa — czego nie potrafią + ani ~. h2:has(+ p) wybiera elementy h2, po których bezpośrednio następują elementy p. li:has(~ .active) wybiera elementy li, które mają późniejszy element rodzeństwa .active.

Można reagować na natywną poprawność formularza bez JavaScriptu: input:has(~ .error-msg) styluje pole input mające element rodzeństwa z komunikatem o błędzie. label:has(+ input:required) styluje etykiety, których powiązane pole input jest wymagane — wszystko wyłącznie za pomocą CSS.

Można wyróżniać kontenery nawigacji na podstawie aktywnego elementu potomnego: nav:has(.active) stosuje style do całego nav, gdy dowolny element potomny ma klasę active. Jest to przydatne do wskazywania na poziomie kontenera, która sekcja nawigacji jest bieżąca.

.grid:has(.card:focus-within) styluje całą siatkę, gdy dowolny card otrzyma fokus z klawiatury. .dropdown:has(:hover) utrzymuje listę rozwijaną otwartą podczas wskazywania dowolnego elementu potomnego — jest to prostsze niż złożone łańcuchy kombinatorów rodzeństwa.

.sidebar:has(nav) stosuje inny układ niż .sidebar:not(:has(nav)). Układ warunkowy bez JavaScriptu: obecność lub brak określonych elementów potomnych steruje układem elementu nadrzędnego, umożliwiając tworzenie naprawdę adaptacyjnego CSS uwzględniającego treść.

:has() z szerokimi selektorami argumentów (np. :has(*)) może być kosztowne — przeglądarka musi sprawdzić każdy element. Argumenty :has() powinny być konkretne. Jeśli to możliwe, proszę wybierać :has(> .specific-child) (bezpośredni element potomny) zamiast :has(.specific-child) (dowolny element potomny).

:has() jest obsługiwane w Chrome 105+, Safari 15.4+ i Firefox 121+. Pełna obsługa w ramach standardu baseline jest dostępna od końca 2023 roku. Nie istnieje polyfill (jego działanie wymagałoby symulacji za pomocą JavaScriptu), dlatego w starszych przeglądarkach należy stosować tę funkcję z progresywnym ulepszaniem, gdy nie jest ona kluczowa.

Wzorce, które wcześniej wymagały nasłuchiwania zdarzeń w JS: „dodaj klasę do elementu nadrzędnego, gdy element potomny otrzyma fokus”, „pokaż nakładkę, gdy istnieje wyzwalacz modalu”, „styluj siatkę inaczej, gdy ma dokładnie trzy elementy”. :has() obsługuje wszystkie te przypadki deklaratywnie.

Co wyróżnia :has() na tle istniejących kombinatorów CSS, takich jak + i ~?

:has() to pierwsza prawdziwa relacyjna pseudoklasa CSS, która umożliwia wybieranie elementów nadrzędnych i poprzedzających elementów rodzeństwa. Umożliwia stylowanie zależne od treści, reagowanie na stan formularza, wyróżnianie nawigacji oraz wiele wzorców, które wcześniej wymagały manipulowania DOM-em za pomocą JavaScriptu — wszystko to deklaratywnie w CSS.