Czy znasz te pseudoselektory CSS?

Na samym początku dogadajmy się co do nazewnictwa. CSS posiada takie bogactwa jak pseudoselektory. Dzielą się one na pseudoklasy (poprzedzone :) oraz pseudoelementy (poprzedzone ::). Teraz możemy zaczynać

:in-range vs. :out-of-range

Pseudoklasy przeznaczone dla elementów input o wartościach liczbowych (też data oraz czas). Łatwo się domyślić ich działania. Jeśli wartość wpisana do pola odpowiada przedziałowi określonemu w atrybutach min oraz max, zadziała pseudoklasa :in-range; w przeciwnym przypadku :out-of-range.



Wsparcie dobre, z niespodziankami na Edge oraz jego brakiem na IE.

:indeterminate

Pseudoklasa, która oznacza stan nieokreślony dla takich elementów jak:

• checkbox – stan, który nie odpowiada ani zaznaczonemu kwadracikowi, ani odznaczonemu
• radio button – stan dla braku wyboru jakiejkolwiek pozycji w grupie opcji
• <progress> bar, czyli pasek postępu – stan, kiedy nie podamy wartości value

Co ciekawe, dla elementu checkbox nie można nadać tej pseudoklasy w HTML. Trzeba to zrobić za pomocą JS. Z kolei element radio, w przypadku kiedy nie ma zaznaczonej domyślnie żadnej z opcji – automatycznie ma nadany stan indeterminate, do czasu kiedy użytkownik dokona jakiegokolwiek wyboru.

Uwaga – na różnych przeglądarkach stan indeterminate może różnie wyglądać. Czasami wizualnie jest identyczny jak stan braku wyboru danej opcji.



Wsparcie generalnie super, z niespodziankami na Edge oraz IE.

:target

Pseudoklasa zadziała, kiedy URL wskazuje na id elementu, na którym jest ona założona.

Czy ta pseudoklasa pomoże nam tylko w stylowaniu bieżącej sekcji strony? Ależ skąd! Spójrzcie TUTAJ. Znajdziecie tam kilka ciekawych sztuczek, np.: pokazywanie/ukrywanie sekcji, animacje, popup… Wsparcie idealne.

:placeholder-shown vs. ::placeholder

Pseudoklasa :placeholder-shown odnosi się do przypadku, kiedy widoczny jest placeholder i służy do stylowania inputa. Z kolei pseudoelement ::placeholder wskazuje na sam placeholder.

Uwaga tutaj na wsparcie. W teorii te pseudoselektory to nadal eksperymentalna technologia. :placeholder-shown dla inputa tekstowego jest wspierane dobrze na wszystkich przeglądarkach oprócz Edge i IE, gdzie wsparcia po prostu nie ma. Trzeba uważać z :placeholder-shown dla inputów o innych typach niż tekst. Natomiast ::placeholder ma dobre wsparcie wszędzie oprócz Edge i IE, gdzie jest ono tylko częściowe.

:right, :left, :first, :blank, :retro, :verso

Te pseudoklasy stylują stronę w wersji do druku (@page). Jak ich nazwy wskazują, określają charakterystyczne style dla stron prawych, lewej, strony pierwszej, pustej, drugiej, pierwszej.

Uwaga! Za pomocą :left oraz :right możesz zmienić tylko własności: margin, padding, border, background. Za pomocą :first możesz zmienić tylko własności: margin, orphans, widows, page-break. Uwaga również na wsparcie, które pozostawia wiele do życzenia.

:retro oraz :verso to głębokie drafty. Pierwszy z nich określa stronę prawą dla kierunku czytania od lewej do prawej oraz lewą dla kierunku od prawej do lewej. Drugi określa stronę lewą dla kierunku czytania od lewej do prawej oraz prawą dla kierunku od prawej do lewej.

:read-only vs. :read-write

:read-only wskazuje na te elementy, których użytkownik nie może edytować. Np. element input z atrybutem readonly.

:read-write wskazuje na te elementy, które użytkownik może edytować.

Wsparcie dobre dla stylowania elementu input. Dla pozostałych elementów – słabo.

::selection

Ten pseudoelement wskazuje na elementy, które zostały zaznaczone myszką przez użytkownika. Dzięki niemu możemy uzyskać ciekawe formy zaznaczenia dokumentu.

Uwaga, za pomocą tego pseudoelementu można zmienić jedynie następujące własności: color, background-color, cursor, outline, text-decoration, text-emphasis-color, text-shadow.

Wsparcie super oprócz Safari i Opery.

:has, :focus-within

O nich możesz przeczytać w moim artykule Stylujemy rodzica w CSS.

Na dziś to tyle w temacie pseudoselektorów. W ich zbiorze znajdzie się jeszcze kilka perełek, w szczególności w drafcie, jednak to już temat na osobny wpis.