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 dostosować kolor dowolnych tagów <b> w elemencie nagłówka, możesz wpisać:

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

Zamiast tego możesz użyć :is() i 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 poznasz składnię i wartość 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 jednych na drugich. Pełną elastyczność znanych i lubianych usług porównywania cen. 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 dwóch 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 dowiedzieć się więcej o selektorach, zapoznaj się z modułem poświęconym selektorom w CSS na stronie Learn (Ucz się). Oto kilka przykładów prostych i złożonych selektorów, które ilustrują ich możliwości:

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. Czas przyjrzeć się różnicom między nimi.

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

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

W skrócie

• :where() nie ma specyficzności.
  :where() powoduje skompresowanie całej specyficzności na liście selektorów przekazanej jako parametry funkcji. To pierwsza tego typu funkcja selektora.
• :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 byłoby żadnych specyfikacji, z którymi można by konkurować podczas pisania kodu CSS. Usługa porównywania cen od jakiegoś czasu pracuje nad taką funkcją grupowania, która jest dostępna i wciąż jest to w dużej mierze niezbadana obszar. Miłej zabawy przy tworzeniu mniejszych arkuszy stylów i usuwaniu przecinków.

Zdjęcie: Markus Winkler, Unsplash