:matchesPseudo-class je popisovaný ako funkčné pseudo-triedu oficiálny CSS selektory Level 4 špecifikácie. Samotné to neslúži nijakému účelu, okrem toho, že niektoré zložité selektory zosvetlíte tým, že ich umožníte zoskupiť. Svojím spôsobom to môžeme považovať :matchesza syntaktický cukor.
V zásade vás to nebráni v opakovaní zloženého voliča, keď sa líši iba jedna položka. Verím, že je nielen rýchlejšie písať, ale aj rýchlejšie analyzovať prehliadače, ale nemám o tom solídne informácie, takže pokiaľ viem, táto pseudotrieda nerobí nič iné ako pomoc pri písaní selektorov.
Syntax
:matches( selector(, selector)* ):matches()akceptuje zoznam platných selektorov ako argument. Páči sa mi to:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Uľahčuje písanie niektorých zložitých selektorov, naprí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 menej sa opakujúce:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Upozorňujeme, že :matches()ich nemožno vnoriť a nefunguje s nimi :not(). Žiadny z nasledujúcich selektorov nebude fungovať:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
V špecifikáciách sa uvádza, že kombinátory (napr ~. >...) nie sú povolené v prechádzajúcom selektore v rýchlom profile, ale budú v komplexnom profile. Zjednodušene povedané, rýchly profil bude prvou (a možnou poslednou) implementáciou špecifikácií, zatiaľ čo zložitý profil súvisí s hypoteticky dokonalou budúcnosťou, kde na výkonnosti veľmi nezáleží.
Aktualizácia z júna 2015: Už si nie ste istí, aký presný je vyššie uvedený odsek. Špecifikácia, s ktorou sme sa spojili, sa zmenila a táto časť je preč. Preto sme odkaz odstránili.
Napodobňovanie správania so Sassom
Je možné simulovať podobné správanie s programom Sass (alebo s akýmkoľvek iným predprocesorom CSS):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Toto vytvára ekvivalentný selektor :matches()využívaním vnorenia selektora. Môžete dokonca vytvoriť nejaký druh funkcie, ktorá by to automatizovala na vyššej úrovni, ale tu to presahuje rámec.
Podpora prehliadača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 88 | 78 | Nie | 88 | 14 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Poznámka: Pretože CSS odmietne celý selektor, ak existuje časť, ktorej nerozumie, musíte ich oddeliť, aby fungovala všade. Napríklad, ak ste 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; )