ŁukaszBącik

#frontendowe spojrzenie na tworzenie stron www

Komentarze: 0

Pseudo selektor :has()

Bardzo niedawno temu, nastał dzień, w którym to pierwsza przeglądarka uruchomiła wsparcie dla pseudo selektora :has() w CSS. Jest to o tyle ważna informacja, ponieważ czekaliśmy na to już od jakiegoś czasu. W skrócie: pseudo selektor :has() wybiera rodzica danego elementu.

Wstęp

Pseudo selektory są używane do określania w CSS, które elementy mają być stylowane. Cały zbiór selektorów CSS opisałem w osobnym wpisie.

Wsparcie

Dokładnie 20 grudnia 2021 roku ukazał się wpis w dokumentacji WebKit, który zawierał notkę, na którą od dawna czekaliśmy. Otóż, przeglądarka Safari Technology Preview w wersji 137 otrzymała wsparcie dla pseudo selektora :has().

W oficjalnej dokumentacji CSS również jest zawarta taka informacja oraz wyjaśnienie składni.

Wszystkie inne przeglądarki póki co nie wspierają tego (stan na dzień 4 stycznia 2022).

Jak działa selektor :has()?

Działanie pseudo selektora :has() jest bardzo proste. Głównym założeniem będzie modyfikacja rodzica danego elementu. Do tej pory nie było to możliwe, rozwiązaniem było (i w sumie nadal jest) wykorzystanie w JS metody parentElement.

if (element.parentElement) {
  element.parentElement.style.color = "red";
}

W przyszłych wydaniach przeglądarek, gdy już otrzymają takie wsparcie w CSS, będzie się to odbywać w stylach.

a:has(> img) {
  max-width: 400px;
}

W powyższym kodzie link zostanie zmodyfikowany tylko w momencie, gdy zawiera w sobie obraz img, czyli stylujemy rodzica elementu.

Podsumowanie

Na zakończenie ponownie stwierdzę, że nadal czekamy na wsparcie pozostałych przeglądarek. Widać jednak, że do tego będą twórcy dążyć. To cieszy, a co ważniejsze, ułatwi pracę nad kodem.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.