Selektor CSS dla rodzica

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.