Den :matchespseudo klassen beskrivs som en funktionell pseudo klass av den officiella CSS Selector Nivå 4 specifikationer. Det tjänar inte något syfte i sig förutom att göra vissa komplexa väljare lättare genom att låta dem grupperas. På ett sätt kan vi tänka :matchessom syntaktiskt socker.
I grund och botten håller det dig borta från att upprepa en sammansatt väljare när det bara finns ett objekt som varierar. Jag tror att det inte bara är snabbare att skriva utan också snabbare att analysera för webbläsare men jag har ingen gedigen information om detta så vitt jag vet gör denna pseudoklass inget mer än att hjälpa till att skriva väljare.
Syntax
:matches( selector(, selector)* ):matches()accepterar en lista med giltiga väljare som argument. Tycka om:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Det gör vissa komplexa väljare mycket lättare att skriva, till exempel:
: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; )Och mindre repetitiva:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Observera att det :matches()inte kan kapslas och inte fungerar med :not(). Ingen av följande väljare fungerar:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nördvarning
Specifikationerna uppger att kombinatorer (t.ex. ~, >...) inte är tillåtna i den passerade väljaren i snabb profil, men kommer att vara i komplex profil. För att uttrycka det enkelt är snabb profil den första (och möjliga sista) implementeringen av specifikationerna, medan den komplexa profilen relaterar till en hypotetisk perfekt framtid där prestanda inte spelar någon roll.
Uppdatering juni 2015: Inte säker på hur korrekt ovanstående stycke är längre. Specifikationen vi länkade till har förändrats och den delen är borta. Så vi tog bort länken.
Efterliknar beteende med Sass
Det är möjligt att simulera ett liknande beteende med Sass (eller vilken CSS-förprocessor som helst):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Detta skapar motsvarande väljare :matches()genom att utnyttja väljare. Du kan till och med skapa någon form av funktion för att automatisera detta på en högre nivå, men det är utanför räckvidden här.
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 88 | 78 | Nej | 88 | 14 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Obs! Eftersom CSS avvisar hela väljaren när det finns en del som den inte förstår, måste du separera dem för att få den att fungera överallt. Till exempel, om du fortfarande är
/* 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; )