:has() to nie selektor rodzica. On eliminuje JavaScript.

Przeszukaj swój kod pod kątem classList.toggle.

Prawdopodobnie znajdziesz wiele instancji tego samego wzorca. Użytkownik klika pole wyboru lub skupia się na polu. Używasz JavaScriptu, aby przełączyć klasę na elemencie nadrzędnym. Pozwala to CSS na stylowanie rodzica.

Możesz usunąć większość tego kodu.

Ludzie nazywają :has() selektorem rodzica. Ta etykieta jest błędna. :has() sprawdza warunek. Analizuje zawartość elementu, aby zdecydować, czy dany styl ma zostać zastosowany.

Może sprawdzać:

  • Element potomny
  • Konkretny element rodzeństwa
  • Liczbę elementów
  • Brak elementu

Oto kilka przykładów:

• Stylizuj kartę, jeśli zawiera obraz: .card:has(img) { ... }

• Stylizuj wiersz, gdy pole wyboru jest zaznaczone: .option-row:has(input:checked) { background: var(--selected-bg); }

• Zmieniaj układ siatki na podstawie liczby elementów: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

Ostatni przykład zmienia układ za pomocą czystego CSS. Odczytuje on bieżący stan DOM.

Wcześniej potrzebowałeś JavaScriptu, aby działał jako posłaniec. Element potomny nie mógł wyzwolić stylów na przodku. Musiałeś napisać listener, aby przenieść klasę w górę drzewa.

Teraz posłaniec zniknął.

Jeśli używasz :has(), Twoje style są zawsze poprawne. Działają przy pierwszym renderowaniu. Działają, gdy użytkownik wraca w przeglądarce. Nie ma opóźnienia między zmianą stanu a zmianą stylu.

Używaj go do:

  • Walidacji formularzy
  • Stanów pustych w listach
  • Paneli przełączanych

Pamiętaj, że :has() ma swoją cenę. Przeglądarka musi ocenić selektor wewnętrzny względem potomków. W większości zadań UI, takich jak walidacja czy przełączanie, nie zauważysz różnicy.

Unikaj używania go przy zmianach o wysokiej częstotliwości, takich jak pozycje przewijania czy tysiące stanów najechania (hover).

Przestań przełączać klasy tylko po to, aby wymusić style z elementu potomnego. Zamiast tego sprawdź, czy :has() może wyrazić ten warunek. Twój CSS się skurczy, a JavaScript zniknie.

:has() działa w Chrome, Firefox, Safari i Edge.

Źródło: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej