Logical Pseudo-class di dalam CSS

#webdev #css #indonesia

Logical pseudo-class adalah jenis pseudo-class dalam CSS yang memungkinkan kita membuat seleksi elemen berdasarkan logika kondisi untuk menyaring elemen berdasarkan struktur atau hubungan dalam DOM.

Daftar Logical Pseudo-class

Pseudo-Class	Deskripsi	Contoh Penggunaan
`:not(selector)`	Menyeleksi elemen yang tidak cocok dengan selector tertentu	`button:not(.primary)`
`:is(selector, …)`	Menyederhanakan banyak selector yang memiliki deklarasi sama	`:is(h1, h2, h3)`
`:where(selector, …)`	Sama seperti `:is()` tapi dengan specificity selalu 0	`:where(article, section)`
`:has(selector)`	Menyeleksi elemen yang memiliki anak/cucu yang cocok dengan selector	`div:has(img)`
`:nth-child(n)`	Menyeleksi elemen berdasarkan urutan anak	`li:nth-child(2)`
`:nth-of-type(n)`	Sama seperti `:nth-child` tapi hanya memperhitungkan jenis tag yang sama	`p:nth-of-type(2)`
`:nth-last-child(n)`	Seperti `:nth-child` tapi dihitung dari belakang	`tr:nth-last-child(1)`
`:nth-last-of-type(n)`	Kombinasi `:nth-last-child` dan `:nth-of-type`	`div:nth-last-of-type(1)`
`:first-child`	Menyeleksi elemen pertama dalam parent	`p:first-child`
`:last-child`	Menyeleksi elemen terakhir dalam parent	`li:last-child`
`:only-child`	Menyeleksi elemen yang menjadi satu-satunya anak	`span:only-child`
`:only-of-type`	Menyeleksi satu-satunya elemen dari jenisnya dalam parent	`h2:only-of-type`
`:empty`	Menyeleksi elemen yang tidak punya isi (termasuk teks/spasi)	`div:empty`

Big 4

Diantara banyaknya Logical pseudo-class, saya sangat merekomendeasikan kamu untuk menguasai 4 diantaranya karena itu merupakan selector CSS modern untuk menulis rule yang lebih fleksibel dan efisien. 4 pseudo-class tersebut adalah:

:not
:is
:where
:has

❗ :not() — Mengecualikan Elemen

:not berfungsi untuk menargetkan semua elemen yang tidak cocok dengan selector tertentu.

/* Menargetkan elemen a yang tidak memiliki class .btn */
a:not(.btn) { .... }

/* Menargetkan elemen textarea yang tidak memiliki attribute rows */
textarea:not([rows]) {
    resize: none;
    field-sizing: content;
}

🧩 :is() — Menyatukan Beberapa Selector

:is berfungsi untuk menargetkan elemen yang cocok dengan salah satu selector di dalamnya.

/* Menargetkan elemen h1, h2, h3 */
:is(h1, h2, h3) { .... }

/* 
    Menargetkan 2 kondisi.
    1. article > p
    2. article > span
 */
article > :is(p, span) { .... }

💡 :where() — Mirip :is(), Tapi Tanpa Bobot Spesifisitas

/* Menargetkan elemen h1, h2, h3 tanpa spesifisitas */
:where(h1, h2, h3) { .... }

/* 
    Menargetkan 2 kondisi tanpa spesifisitas pada p dan span.
    1. article > p
    2. article > span
 */
article > :where(p, span) { .... }

🔎 :has() — Menargetkan Elemen yang MENGANDUNG Elemen Tertentu

:has berfungsi untuk menyeleksi elemen berdasarkan child atau selector yang diberikan.

/* Menargetkan button yang memiliki descendant child svg */
button:has(svg) { .... }

/* Menargetkan article yang memiliki direct child img */
article:has(> img) { .... }

/* Menargetkan label yang memiliki attribute required pada next-sibling */
label:has(+ [required])::after {
    content: "*"
}

✨ Penutup

Semoga tulisan saya ini dapat mengupgrade kemampuan css kamu sebagai frontend developer.

Kalau kamu suka artikel ini, jangan lupa 💖 save, 🗨️ comment, dan 🔁 share ke teman developer lainnya!

Sampai jumpa di tulisan berikutnya 👋

Top comments (1)

Dream • Jun 2

Penjelasan tentang perbedaan :is() dan :where() menarik, terutama pada bagian spesifisitas yang bisa sangat membantu ketika ingin menulis CSS yang lebih mudah diatur!