Computer Keyboard - Głównie JavaScript

Głównie JavaScript

rss feed icon

by

Selektor CSS dla rodzica

Ręka niemowlaka dotyka pomarszczonej ręki dorosłego

Specyfikacja CSS3 nie udostępniała żadnej możliwości zaznaczania rodzica, natomiast moduł Selectors Level 4, który jest szkicem (ang. draft) udostępnia taką możliwość.

Udostępnia nowa pseudo klasę :has podobną do :not, która daje możliwość pójścia dalej w głąb drzewa DOM, ale element, który wskazuje selektor się nie zmienia np.:

.container .wrapper:has(a.delete) {
    background-color: red;
}
.container .wrapper a.delete {
    color: red;
}

Powyższy kod przypisze czerwone tło dla wrappera, który ma wewnątrz siebie link o klasie delete.

Niestety żadna przeglądarka jeszcze nie zaimplementowała pseudo klasy :has.

Jest natomiast jeden selektor, który jest zaimplementowany, w niektórych przeglądarkach, a który dodaje do CSS możliwość zaznaczania rodzica, a jest nim :focus-within. Działa tak jak :has, ale tylko dla dziecka, które ma focus, czyli jest odpowiednikiem :has(:focus).

Aby zobaczyć przeglądarki, które zaimplementowały ten selektor możesz sprawdzić: can I use.

O selektorze możesz przeczytać na stronie w3.org.

Jeśli chcesz zobaczyć jak działa, to użyłem go w tym Szablonie/Demo na Codepen, gdzie wewnątrz elementu .cmd, jest ukryty element textarea, który dostaje focus, jak się kliknie na terminal.

źródło strony (aby zobaczyć kod na githubie musisz kliknąć przycisk raw)