De :matchespseudo-klasse wordt beschreven als een functionele pseudo-klasse door de officiële CSS Selectors Level 4-specificaties. Het dient op zichzelf geen enkel doel, behalve het lichter maken van sommige complexe selectors door ze te groeperen. In zekere zin kunnen we denken :matchesals syntactische suiker.
In feite weerhoudt het u ervan een samengestelde selector te herhalen als er maar één item is dat varieert. Ik geloof dat het niet alleen sneller is om te schrijven, maar ook sneller om te ontleden voor browsers, maar ik heb hier geen solide informatie over, dus voor zover ik weet, doet deze pseudo-klasse niets meer dan het helpen bij het schrijven van selectors.
Syntaxis
:matches( selector(, selector)* ):matches()accepteert een lijst met geldige selectors als argument. Leuk vinden:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Het maakt sommige complexe selectors een stuk gemakkelijker om te schrijven, bijvoorbeeld:
: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; )En minder repetitief:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Merk op dat :matches()het niet kan worden genest en niet werkt met :not(). Geen van de volgende selectors werkt:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd waarschuwing
De specificaties stellen dat combinatoren (bijv ~. >…) Niet zijn toegestaan in de doorgegeven selector in snel profiel, maar in complex profiel. Simpel gezegd, snel profiel zal de eerste (en mogelijk laatste) implementatie van de specificaties zijn, terwijl een complex profiel een hypothetische perfecte toekomst betreft waarin prestaties er niet veel toe doen.
Update juni 2015: Ik weet niet zeker hoe nauwkeurig de bovenstaande paragraaf meer is. De specificatie waarnaar we hebben gelinkt, is gewijzigd en dat deel is verdwenen. Dus hebben we de link verwijderd.
Gedrag nabootsen met Sass
Het is mogelijk om een soortgelijk gedrag te simuleren met Sass (of een andere CSS-preprocessor):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Dit creëert de equivalente selector van :matches()door gebruik te maken van selector-nesting. Je zou zelfs een soort functie kunnen creëren om dit op een hoger niveau te automatiseren, maar dat valt hier buiten het bereik.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 88 | 78 | Nee | 88 | 14 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Opmerking: aangezien CSS de volledige selector afwijst wanneer er een deel is dat het niet begrijpt, moet u ze scheiden om het overal te laten werken. Als je bijvoorbeeld stil bent
/* 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; )