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.
ŁukaszPodziel się artykułem:
)
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.
