:matchesPseudo-class je popisován jako funkční pseudo-třídu oficiální CSS selektory Level 4 specifikace. Samo o sobě neslouží žádnému účelu, kromě toho, že některé složité selektory odlehčí tím, že je umožní seskupit. Svým způsobem to můžeme považovat :matchesza syntaktický cukr.
V zásadě vám brání v opakování složeného voliče, když existuje pouze jedna položka, která se liší. Věřím, že je nejen rychlejší psát, ale také rychleji analyzovat pro prohlížeče, ale nemám o tom žádné solidní informace, takže pokud vím, tato pseudotřída nedělá nic jiného než pomoc při psaní selektorů.
Syntax
:matches( selector(, selector)* ):matches()přijme seznam platných selektorů jako argument. Jako:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )U některých složitých selektorů je psaní mnohem snazší, například:
:matches(section, article, aside, nav) :matches(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )A méně se opakující:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Všimněte si, že :matches()nelze vnořit a nefunguje s :not(). Žádný z následujících selektorů nebude fungovat:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
Specifikace uvádějí, že kombinátory (např ~. >…) Nejsou povoleny v předaném selektoru v rychlém profilu, ale budou ve složitém profilu. Zjednodušeně řečeno, rychlý profil bude první (a možná poslední) implementací specifikací, zatímco složitý profil souvisí s hypotetickou dokonalou budoucností, kde na výkonu moc nezáleží.
Aktualizace z června 2015: Už si nejste jisti, jak přesný je výše uvedený odstavec. Specifikace, se kterou jsme se spojili, se změnila a tato část je pryč. Takže jsme odkaz odstranili.
Napodobování chování se Sassem
Je možné simulovat podobné chování pomocí Sass (nebo jakéhokoli preprocesoru CSS):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Tím se vytvoří ekvivalentní selektor :matches()využíváním vnoření selektoru. Můžete dokonce vytvořit nějaký druh funkce, která by to automatizovala na vyšší úrovni, ale zde je to mimo rozsah.
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 88 | 78 | Ne | 88 | 14 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Poznámka: protože CSS odmítá celý selektor, pokud existuje část, které nerozumí, musíte je oddělit, aby fungovala všude. Například pokud jste stále
/* This won't work in any browser because * Webkit browsers do not know `moz` and * Gecko browsers do not know `webkit` */ :-webkit-any(a, b) c, :-moz-any(a, b) c ( color: #BADA55; ) /* This however will work */ :-webkit-any(a, b) c ( color: #BADA55; ) :-moz-any(a, b) c ( color: #BADA55; )