Den :matchespseudo-klasse er beskrevet som en funksjonell pseudo-klasse ved den offisielle CSS velgere nivå 4 spesifikasjoner. Det tjener ikke noe formål i seg selv, bortsett fra å gjøre noen komplekse velgere lettere ved å la dem grupperes. På en måte kan vi tenke :matchessom syntaktisk sukker.
I utgangspunktet holder det deg borte fra å gjenta en sammensatt velger når det bare er ett element som varierer. Jeg tror det ikke bare er raskere å skrive, men også raskere å analysere for nettlesere, men jeg har ingen solid informasjon om dette, så vidt jeg vet, gjør denne pseudoklassen ingenting mer enn å hjelpe skrivevalg.
Syntaks
:matches( selector(, selector)* ):matches()godtar en liste over gyldige velgere som argument. Som:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Det gjør noen komplekse velgere mye lettere å skrive, for eksempel:
: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; )Og mindre repeterende:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Merk at det :matches()ikke kan nestes og ikke fungerer med :not(). Ingen av følgende velgere vil fungere:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerdvarsling
Spesifikasjonene angir at kombinatorer (f.eks. ~, >...) ikke er tillatt i den passerte velgeren i rask profil, men vil ha en kompleks profil. For å si det enkelt, vil rask profil være den første (og mulige siste) implementeringen av spesifikasjonene, mens den komplekse profilen relaterer til en hypotetisk perfekt fremtid der ytelse ikke betyr noe.
Oppdatering juni 2015: Ikke sikker på hvor nøyaktig avsnittet ovenfor er lenger. Spesifikasjonen vi koblet til har endret seg og den delen er borte. Så vi fjernet lenken.
Etterligne oppførsel med Sass
Det er mulig å simulere en lignende oppførsel med Sass (eller hvilken som helst CSS-prosessor for den saks skyld):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Dette skaper ekvivalent velger :matches()ved å utnytte selector nesting. Du kan til og med lage en slags funksjon for å automatisere dette på et høyere nivå, men det er utenfor omfanget her.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 88 | 78 | Nei | 88 | 14 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Merk: siden CSS avviser hele velgeren når det er en del den ikke forstår, må du skille dem for å få det til å fungere overalt. For eksempel hvis du fortsatt er
/* 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; )