Az :matchesál-osztályt funkcionális ál-osztályként írja le a hivatalos CSS Selectors 4. szintű specifikáció. Önmagában semmilyen célt nem szolgál, csak néhány komplex választót könnyebbé tesz azáltal, hogy lehetővé teszi csoportosításukat. Bizonyos értelemben :matchesszintaktikus cukorként gondolkodhatunk .
Alapvetően megakadályozza, hogy megismételje az összetett választót, ha csak egy elem változik. Úgy gondolom, hogy nemcsak gyorsabb az írás, hanem a böngészőknél is gyorsabb az elemzés, de erről nincsenek szilárd információim, amennyire tudom, hogy ez az álosztály nem tesz mást, mint segít a kiválasztók írásában.
Szintaxis
:matches( selector(, selector)* ):matches()elfogadja az érvényes szelektorok listáját argumentumként. Tetszik:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Sokkal megkönnyíti egyes összetett választók írását, például:
: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; )És kevésbé ismétlődő:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Ne feledje, hogy :matches()nem lehet egymásba ágyazni és nem működik :not(). A következő választók egyike sem fog működni:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
A specifikációk szerint a kombinátorok (pl ~. >...) nem engedélyezettek az átengedett választóban gyors profilban, de összetett profilúak lesznek. Leegyszerűsítve: a gyors profil lesz a specifikációk első (és lehetséges utolsó) megvalósítása, míg az összetett profil egy hipotetikus tökéletes jövőre vonatkozik, ahol a teljesítmény nem számít sokat.
Frissítve 2015. június: Nem biztos abban, hogy mennyire pontos a fenti bekezdés. A specifikáció, amelyhez kapcsolódtunk, megváltozott, és ez a rész eltűnt. Tehát eltávolítottuk a linket.
Viselkedés utánzása Sass-szal
Szimulálni lehet hasonló viselkedést a Sass-szal (vagy bármely CSS-előfeldolgozóval):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Ez a :matches()szelektor fészkelésének kihasználásával hozza létre az egyenértékű szelektort . Akár hozhat létre valamilyen funkciót ennek magasabb szintű automatizálására, de ez itt nem tartozik a hatókörbe.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 88 | 78 | Nem | 88 | 14 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 14,0–14,4 |
Megjegyzés: mivel a CSS elutasítja a teljes választót, ha van olyan rész, amelyet nem ért, ezért külön kell választani őket, hogy mindenhol működjön. Például, ha még mindig
/* 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; )