Pemilih kelas semu fungsional CSS baru :is() dan :where()

Penambahan kecil pada sintaksis pemilih CSS ini akan berdampak besar.

Adam Argyle

Saat menulis CSS, terkadang Anda akan memiliki daftar pemilih yang panjang untuk ditargetkan beberapa elemen dengan aturan gaya yang sama. Misalnya, jika Anda ingin menyesuaikan warna tag <b> yang ditemukan di dalam elemen judul, Anda dapat menulis:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Sebagai gantinya, Anda dapat menggunakan :is() dan meningkatkan keterbacaan sekaligus menghindari pemilih:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

Kejelasan dan kemudahan pemilih yang lebih pendek hanyalah sebagian dari nilai yang :is() dan :where() dibawa ke CSS. Dalam posting ini, Anda akan menemukan {i>syntax<i} dan nilai dari kedua pemilih pseudo fungsional ini.

Kompatibilitas browser

:is()

:where()

Temui :is() dan :where()

Ini adalah pemilih class semu fungsional. Perhatikan () di bagian akhir dan mereka memulainya dengan :. Anggap ini sebagai panggilan fungsi dinamis runtime yang mencocokkan elemen. Saat menulis CSS, CSS memberi Anda cara untuk mengelompokkan elemen bersama-sama di tengah, awal atau akhir pemilih. Parameter ini juga dapat mengubah spesifitas, sehingga Anda dapat membatalkan atau meningkatkan spesifitas.

Pengelompokan pemilih

Apa pun yang dapat dilakukan :is() terkait pengelompokan, :where() juga dapat melakukannya. Ini termasuk digunakan di mana saja dalam pemilih, {i>nesting<i} dan {i>stacking<i}. Fleksibilitas CSS penuh yang Anda kenal dan sukai. Berikut beberapa contohnya:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Masing-masing contoh pemilih di atas menunjukkan fleksibilitas dari keduanya kelas semu fungsional. Untuk menemukan area kode Anda yang bisa mendapatkan manfaat dari :is() atau :where(), cari pemilih dengan beberapa koma dan pemilih pengulangan.

Menggunakan pemilih yang sederhana dan kompleks dengan :is()

Untuk mempelajari lagi pemilih, lihat modul pemilih di Learn CSS. Berikut beberapa contoh pemilih sederhana dan kompleks untuk membantu menggambarkan kemampuan:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Sejauh ini, :is() dan :where() dapat dipertukarkan secara sintaksis. Sekarang saatnya melihat perbedaannya.

Perbedaan antara :is() dan :where()

Jika menyangkut kekhususan, :is() dan :where() sangat berbeda. Untuk mempelajari kekhususan, lihat modul kekhususan di Belajar CSS.

Singkatnya

• :where() tidak memiliki kekhususan.
  :where() mengurangi semua kekhususan dalam daftar pemilih yang diteruskan sebagai parameter fungsional. Ini adalah peristiwa pertama jenis pemilih.
• :is() mengambil kekhususan pemilih yang paling spesifik.
  :is(a,div,#id) memiliki skor kekhususan ID, 100 poin.

Menggunakan pemilih spesifitas tertinggi dari daftar hanya menjadi masalah bagi saya saat saya terlalu bersemangat untuk melakukan pengelompokan. Saya selalu dapat meningkatkan keterbacaan dengan memindahkan pemilih dengan spesifitas tinggi ke pemilih sendiri yang tidak akan terlalu berdampak. Berikut adalah contohnya:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Dengan :where(), saya menunggu untuk melihat library menawarkan versi tanpa spesifikasi. Kompetisi kekhususan antara gaya penulis dan perpustakaan {i>style<i} bisa berakhir. Tidak akan ada kekhususan untuk bersaing saat menulis CSS. CSS telah mengerjakan fitur pengelompokan seperti ini selama beberapa waktu sekali, tapi masih menjadi wilayah yang belum terjamah. Selamat membuat stylesheet yang lebih kecil dan menghapus koma.

Foto oleh Markus Winkler di Unsplash