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

Penambahan yang tampaknya kecil pada sintaksis pemilih CSS ini akan memiliki dampak besar.

Adam Argyle

Saat menulis CSS, terkadang Anda akan mendapatkan daftar pemilih yang panjang untuk menargetkan 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 yang panjang:

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

Keterbacaan dan kemudahan pemilih yang lebih pendek hanyalah sebagian dari nilai yang dibawa :is() dan :where() ke CSS. Dalam postingan ini, Anda akan menemukan sintaksis dan nilai dari dua pemilih pseudo fungsional ini.

Kompatibilitas browser

:is()

:where()

Bertemu dengan :is() dan :where()

Ini adalah pemilih pseudo-class fungsional, perhatikan () di bagian akhir dan cara memulainya dengan :. Anggap ini sebagai panggilan fungsi dinamis runtime yang cocok dengan elemen. Saat menulis CSS, Anda dapat menggunakan selector untuk mengelompokkan elemen 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. Hal ini termasuk digunakan di mana saja dalam pemilih, menyusun bertingkat, dan menumpuknya. 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;
}

Setiap contoh pemilih di atas menunjukkan fleksibilitas dari dua pseudo-class fungsional ini. Untuk menemukan area kode yang dapat memanfaatkan :is() atau :where(), cari pemilih dengan beberapa koma dan pengulangan pemilih.

Menggunakan pemilih sederhana dan kompleks dengan :is()

Untuk mengulang materi pemilih, lihat modul pemilih di Learn CSS. Berikut beberapa contoh pemilih sederhana dan kompleks untuk membantu mengilustrasikan kemampuan tersebut:

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()

Dalam hal kekhususan, :is() dan :where() sangat berbeda. Untuk mempertajam pemahaman tentang kekhususan, lihat modul kekhususan di Learn CSS.

Singkatnya

• :where() tidak memiliki spesifitas.
  :where() menggabungkan semua spesifitas dalam daftar pemilih yang diteruskan sebagai parameter fungsional. Ini adalah fitur pemilih pertama yang pernah ada.
• :is() menggunakan kekhususan pemilih yang paling spesifik.
  :is(a,div,#id) memiliki skor kekhususan ID, 100 poin.

Memilih 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. Persaingan kekhususan antara gaya penulis dan gaya library dapat berakhir. Tidak akan ada kekhususan yang bersaing saat menulis CSS. CSS telah mengerjakan fitur pengelompokan seperti ini selama beberapa waktu, fitur ini sudah ada, dan masih merupakan wilayah yang belum banyak dijelajahi. Selamat membuat stylesheet yang lebih kecil dan menghapus koma.

Foto oleh Markus Winkler di Unsplash