Moderní tvorba webových aplikací

O webu

Selektor :matches

CSS pseudotřída :matches slouží ke zjednodušení zápisu dlouhých výčtů selektorů.

3 minuty

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

Související články

Znázornění možnosti scrollování

Jak dát uživateli informaci, že je možné někam scrollovat.

10 minut

Plynulé scrollování na obsah

Jak vytvořit plynulé odrolování na určitou část stránky.

6 minut

Různá šířka <input type=number> s min/max

Proč má <input type=number> různou výchozí šířku v závislosti na min/max atributech.

3 minuty

Poskakování stránky kvůli posuvníku

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

8 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025