:matchesPseudo-clasa este descrisă ca o pseudo-clasă funcțională de CSS oficial Căutători Level 4 caietul de sarcini. Nu servește niciunui scop în sine, în afară de a ușura unele selectoare complexe, permițându-le să fie grupate. Într-un fel, putem gândi ca :matcheszahăr sintactic.
Practic vă ține departe de repetarea unui selector compus atunci când există un singur element care variază. Cred că nu numai că este mai rapid să scrii, ci și să analizezi mai rapid pentru browsere, dar nu am informații solide despre asta, așa cum știu că această pseudo-clasă nu face altceva decât să ajute la scrierea selectorilor.
Sintaxă
:matches( selector(, selector)* ):matches()acceptă o listă de selectoare valide ca argument. Ca:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Unele selectoare complexe fac mult mai ușor de scris, de exemplu:
: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 mai puțin repetitive:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Rețineți că :matches()nu poate fi imbricat și nu funcționează cu :not(). Niciunul dintre următorii selectori nu va funcționa:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Alertă de tocilar
Specificațiile indică faptul că combinatoarele (de exemplu ~, >...) nu sunt permise în selectorul trecut în profil rapid, dar vor fi în profil complex. Mai simplu, profilul rapid va fi prima (și posibilă) ultimă implementare a specificațiilor, în timp ce profilul complex relatează un viitor perfect ipotetic în care performanța nu contează prea mult.
Actualizare iunie 2015: Nu sunt sigur cât de exact este paragraful de mai sus. Specificațiile cu care ne-am legat s-au schimbat și partea respectivă a dispărut. Așa că am eliminat linkul.
Comportamentul imitant cu Sass
Este posibil să simulați un comportament similar cu Sass (sau orice preprocesor CSS în acest sens):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Aceasta creează selectorul echivalent al :matches()prin exploatarea cuibăririi selectorului. Puteți chiar să creați un fel de funcție pentru a automatiza acest lucru la un nivel superior, dar acest lucru nu intră în domeniul de aplicare aici.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 88 | 78 | Nu | 88 | 14 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Notă: întrucât CSS respinge întregul selector atunci când există o parte pe care nu o înțelege, trebuie să le separați pentru a funcționa peste tot. De exemplu, dacă sunteți încă
/* 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; )