Nowe funkcjonalne selektory pseudoklasy CSS :is() i :where()

Te pozornie niewielkie dodatki do składni selektora CSS będą miały duży wpływ.

Adam Argyle

Podczas pisania kodu CSS możesz czasem uzyskać długie listy selektorów, aby kierować na wiele elementów te same reguły stylów. Jeśli na przykład chcesz zmienić kolor tagów <b> znajdujących się w elemencie nagłówka, możesz napisać:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Zamiast tego możesz użyć :is(), aby poprawić czytelność, unikając długiego selektora:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

Czytelność i krótsze selektory to tylko część wartości, jaką :is() i :where() wnoszą do CSS. W tym artykule znajdziesz informacje o składni i wartości tych 2 funkcjonalnych pseudoselektorów.

Zgodność z przeglądarką

:is()

:where()

Poznaj :is() i :where()

To funkcjonalne selektory pseudoklas, na końcu których widać (), a na początku :. Traktuj je jako wywołania dynamicznych funkcji w czasie wykonywania, które dopasowują elementy. Podczas pisania kodu CSS pozwalają one grupować elementy w środku, na początku lub na końcu selektora. Mogą też zmieniać specyficzność, dając Ci możliwość anulowania lub zwiększenia specyficzności.

Grupowanie selektora

:where() może wykonywać te same czynności dotyczące grupowania co :is(). Dotyczy to ich używania w dowolnym miejscu w selektorze, zagnieżdżania i umieszczania na siebie. Pełna elastyczność CSS, którą znasz i cenisz. Oto kilka przykładów:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Każdy z wymienionych przykładów pokazuje elastyczność tych 2 funkcjonalnych pseudoklas. Aby znaleźć obszary kodu, w których można użyć funkcji :is() lub :where(), poszukaj selektorów z wieloma przecinkami i ich powtórzeniami.

Używanie prostych i złożonych selektorów w :is()

Aby przypomnieć sobie selektory, zapoznaj się z modułem selektorów w Learn CSS. Oto kilka przykładów prostych i złożonych selektorów, które pokazują możliwości tej funkcji:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Do tej pory :is() i :where() są ze sobą syntaktycznie wymienne. Pora przyjrzeć się, czym się różnią.

Różnica między :is() a :where()

Jeśli chodzi o konkretność, :is() i :where() różnią się znacznie. Aby dowiedzieć się więcej o specyficzności, przeczytaj moduł o specyficzności w CSS.

Krótko mówiąc

• :where() nie ma specyficzności.
  :where() powoduje skompresowanie całej specyficzności na liście selektorów przekazanej jako parametry funkcji. Jest to pierwsza tego rodzaju funkcja.
• :is() przyjmuje szczegółowość najbardziej szczegółowego selektora.
  :is(a,div,#id) ma wynik szczegółowości identyfikatora, czyli 100 punktów.

Wybór selektora o najwyższej specyficzności z listy był dla mnie pułapką, gdy zbytnio zafascynowałem się grupowaniem. Zawsze można poprawić czytelność, przenosząc selektor o wysokiej specyficzności do własnego selektora, gdzie nie będzie on miał tak dużego wpływu. Oto przykład:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

W przypadku :where() czekam na to, aż biblioteki zaczną oferować wersje bez ograniczeń. Konkurencja w zakresie specyfikiczności między stylami autora a stylami biblioteki może się zakończyć. Nie ma żadnych specyfikacji, z którymi można by konkurować podczas pisania kodu CSS. Zespół CSS od dłuższego czasu pracuje nad taką funkcją grupowania, która jest już dostępna, ale nadal jest to w dużej mierze nieodkryte terytorium. Życzymy przyjemności z tworzenia mniejszych arkuszy stylów i usuwania przecinków.

Zdjęcie: Markus Winkler, Unsplash