The :matchespseudo-class digambarkan sebagai pseudo-kelas fungsional dengan CSS resmi Selectors Level 4 spesifikasi. Itu tidak melayani tujuan apa pun dalam dirinya sendiri kecuali membuat beberapa penyeleksi kompleks lebih ringan dengan memungkinkan mereka untuk dikelompokkan. Di satu sisi, kita bisa berpikir sebagai :matchesgula sintaksis.
Pada dasarnya, ini menjauhkan Anda dari pengulangan pemilih gabungan ketika hanya ada satu item yang bervariasi. Saya percaya ini tidak hanya lebih cepat untuk menulis tetapi juga lebih cepat untuk mengurai untuk browser tetapi saya tidak memiliki informasi yang solid tentang ini sejauh yang saya tahu kelas semu ini tidak lebih dari membantu menulis penyeleksi.
Sintaksis
:matches( selector(, selector)* ):matches()menerima daftar pemilih yang valid sebagai argumen. Suka:
:matches(section, article, aside, nav) h1 ( color: #BADA55; ) /* Same thing as this… */ section h1, article h1, aside h1, nav h1 ( color: #BADA55; )Itu membuat beberapa penyeleksi kompleks menjadi lebih mudah untuk ditulis, misalnya:
: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; )Dan kurang repetitif:
.links:matches(:hover, :focus, :active) ( color: #BADA55; ) /* Same as */ .links:hover, .links:focus, .links:active ( color: #BADA55; )Perhatikan bahwa :matches()tidak dapat disarangkan dan tidak berfungsi :not(). Tak satu pun dari penyeleksi berikut akan berfungsi:
/* Doesn't work */ :matches(:not(… )) /* Doesn't work */ :not(:matches(… )) /* Doesn't work */ :matches(:matches(… ))Nerd Alert
Spesifikasi menyatakan bahwa kombinator (misalnya ~, >…) tidak diperbolehkan dalam pemilih yang diteruskan dalam profil cepat, tetapi akan berada dalam profil yang kompleks. Sederhananya, profil cepat akan menjadi implementasi spesifikasi yang pertama (dan mungkin terakhir), sedangkan profil kompleks menghubungkan masa depan hipotetis yang sempurna di mana kinerja tidak terlalu menjadi masalah.
Pembaruan Juni 2015: Tidak yakin seberapa akurat paragraf di atas lagi. Spesifikasi yang kami tautkan telah berubah dan bagian itu hilang. Jadi kami menghapus tautan tersebut.
Meniru perilaku dengan Sass
Dimungkinkan untuk mensimulasikan perilaku serupa dengan Sass (atau praprosesor CSS apa pun dalam hal ini):
// section h1, article h1, aside h1, nav h1 section, article, aside, nav ( h1 ( color: #BADA55; ) )Ini membuat pemilih yang setara :matches()dengan dengan mengeksploitasi penumpukan pemilih. Anda bahkan dapat membuat semacam fungsi untuk mengotomatiskan ini di tingkat yang lebih tinggi, tetapi itu di luar cakupan di sini.
Dukungan browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 88 | 78 | Tidak | 88 | 14 |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 |
Catatan: karena CSS menolak seluruh pemilih ketika ada bagian yang tidak dipahami, Anda harus memisahkannya agar berfungsi di mana-mana. Misalnya, jika Anda diam
/* 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; )