Selektor :matches

Zápis

Pokud budeme například chtít mít společný styl pro :hover a :focus stavy odkazů v nějakém společném elementu, jde to napsat nějak takto:

.spolecny a:hover, 
.spolecny a:focus {
  /* pravidla */
}

Selektorem :matches jde tento zápis zpřehlednit bez nutnosti se opakovat.

.spolecny a:matches(:hover, :focus) {
  /* pravidla */
}

Tento selektor zachytí všechny odkazy v rodiči s třídou spolecny, které vyhovují pseudo-třídám :hover nebo :focus.

Dalším případem užití může být například stylování nadpisů v rámci .obalu.

.obal h1,
.obal h2,
.obal h3 {
  /* pravidla */
}

S použitím :matches:

.obal :matches(h1, h2, h3) {
  /* pravidla */
}

V rámci jednoho předpisu může být :matches použit i vícekrát. Tento kód se proto aplikuje na všechny h1, h2 a h3 v elementech .obal nebo .jiny-obal.

:matches(.obal, .jiny-obal) :matches(h1, h2, h3) {
  /* pravidla */
}

Podpora v prohlížečích

Selektor :matches zatím není podporován, obdobně ale funguje selektor :any s CSS prefixy s podporou trochu lepší:

  • :-webkit-anyChrome 12+, Safari 5+, Opera 15+
  • :-moz-anyFirefox 4+

Živá ukázka

Poznámka: Selektory s prefixy není možné sdružovat, musí se duplikovat. Tohle proto fungovat nebude:

a:-webkit-any(:hover, :focus),
a:-moz-any(:hover, :focus) {
  /* nebude fungovat */
}

Matches v JavaScriptu

V JavaScriptu obdobně slouží metoda matchesSelector. Zatím je podporovaná s prefixy, případně jde doplnit querySelectorem.

Živá ukázka s využitím polyfillu

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

CSS 3 selektory

Seznam všech CSS 3 selektorů

V CSS 3 je spousta selektorů, které s postupným mizením starších prohlížečů může dávat smysl znát.

CSS 3 selektory v IE 6, 7, 8

CSS 3 selektory ve starých IE

Doplnění podpory CSS 3 selektorů do starých prohlížečů pomocí JavaScriptu.

Označení externích odkazů

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

Komentáře