:matchesPseudo-klasa je opisana kao funkcionalni pseudo-klase od strane službenog CSS selektora Level 4 specifikacije. To samo po sebi nema nikakvu svrhu, osim što olakšava neke složene selektore dopuštajući im da budu grupirani. Na neki način možemo misliti :matcheskao sintaktički šećer.
U osnovi vas sprječava da ponovite birač spojeva kada postoji samo jedna stavka koja se razlikuje. Vjerujem da je brže pisanje, ali i brže raščlanjivanje preglednika, ali o tome nemam čvrste informacije, koliko znam da ova pseudo-klasa ne nudi ništa više od pomaganja u pisanju birača.
Sintaksa
:matches( selector(, selector)* ):matches()prihvaća popis valjanih selektora kao argument. Kao:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Nekim je složenim selektorima puno lakše pisati, na primjer:
: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; )I manje ponavljajuće:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Imajte na umu da :matches()se ne može ugnijezditi i s kojim ne radi :not(). Nijedan od sljedećih selektora neće raditi:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Upozorenje štrebera
Specifikacije navode da kombinatori (npr ~. >...) nisu dopušteni u proslijeđenom biraču u brzom profilu, ali će biti u složenom profilu. Pojednostavljeno, brzi profil bit će prva (i moguća posljednja) implementacija specifikacija, dok složeni profil povezuje hipotetičku savršenu budućnost u kojoj performanse nisu bitne.
Ažuriranje u lipnju 2015 .: Nisam siguran koliko je gornji odlomak precizan. Specifikacije s kojima smo se povezali promijenile su se i taj dio je nestao. Stoga smo uklonili vezu.
Oponašajući ponašanje sa Sassom
Moguće je simulirati slično ponašanje sa Sassom (ili bilo kojim CSS pretprocesorom):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Ovo stvara ekvivalent selektora :matches()iskorištavanjem gniježđenja selektora. Možete čak stvoriti neku vrstu funkcije koja će to automatizirati na višoj razini, ali to ovdje nije obuhvaćeno.
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 88 | 78 | Ne | 88 | 14 |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 |
Napomena: budući da CSS odbija cijeli selektor kad postoji dio koji ne razumije, morate ih razdvojiti kako bi posvuda radio. Na primjer, ako ste još uvijek
/* 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; )