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

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

Adam Argyle

Saat menulis CSS, terkadang ada 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 panjang:

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

Kejelasan dan kemudahan pemilih yang lebih singkat hanyalah sebagian dari nilai yang dihadirkan :is() dan :where() ke CSS. Dalam postingan ini, Anda akan menemukan sintaks dan nilai dari kedua pemilih pseudo fungsional ini.

Visual tak terbatas sebelum dan sesudah menggunakan :is()

Kompatibilitas browser

:is()

Dukungan Browser

  • 88
  • 88
  • 78
  • 14

Sumber

:where()

Dukungan Browser

  • 88
  • 88
  • 78
  • 14

Sumber

Temui :is() dan :where()

Ini adalah pemilih class pseudo fungsional, perhatikan () di bagian akhir dan caranya dimulai dengan :. Anggap ini sebagai panggilan fungsi dinamis runtime yang cocok dengan elemen. Saat menulis CSS, Anda dapat mengelompokkan elemen di tengah, awal, atau akhir pemilih. Mereka juga dapat mengubah kekhususan, memberi Anda kemampuan untuk membatalkan atau menambah kekhususan.

Pengelompokan pemilih

Apa pun yang dapat dilakukan :is() terkait pengelompokan, begitu juga :where(). Hal ini termasuk digunakan di mana saja dalam pemilih, menumpuk bertingkat, dan menjadikannya bertingkat. 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 kedua class pseudo fungsional ini. Untuk menemukan area kode yang dapat memanfaatkan :is() atau :where(), cari pemilih dengan beberapa koma dan pengulangan pemilih.

Menggunakan pemilih yang sederhana dan kompleks dengan :is()

Untuk mempelajari kembali pemilih, lihat modul pemilih di Pelajari CSS. Berikut adalah 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. Saatnya untuk melihat bagaimana mereka berbeda.

Perbedaan antara :is() dan :where()

Dalam hal kekhususan, :is() dan :where() sangat berbeda. Untuk mempelajari kekhususan, lihat modul kekhususan pada Learn CSS.

Singkatnya

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

Pengambilan pemilih kekhususan tertinggi dari daftar ini merupakan kemampuan saya ketika saya terlalu bersemangat untuk mengelompokkan. Saya selalu bisa meningkatkan keterbacaan dengan memindahkan pemilih kekhususan tinggi ke pemilihnya sendiri yang tidak akan terlalu berdampak. Berikut 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 kekhususan. Persaingan kekhususan antara gaya penulis dan gaya library dapat berakhir. Tidak ada kekhususan untuk bersaing dengan saat menulis CSS. CSS telah cukup lama mengerjakan fitur pengelompokan seperti ini, sudah ada, dan masih belum dieksplorasi. Selamat membuat stylesheet yang lebih kecil dan menghapus koma.

Foto oleh Markus Winkler di Unsplash