Menguasai Logika Kombinasi Selector CSS: Cara Modern Mengontrol Urutan dan Struktur List Tanpa JavaScript
World Wide Web Consortium, list (Daftar), style (Gaya/Tampilan), type / child (Jenis / Turunan)
Dalam pengembangan web modern, elemen daftar (list) seperti <ul> dan <ol> tidak lagi sekadar menjadi wadah teks berurutan. Dengan memanfaatkan kombinasi pseudo-class tingkat lanjut, kita dapat menyuntikkan logika kondisional langsung ke dalam arsitektur CSS. Artikel ini akan membahas penjabaran logika selector tersebut beserta contoh penerapannya pada desain tata letak dunia nyata.
Daftar Isi Panduan
- Memahami Cara Kerja Logika Kombinasi CSS
- Petunjuk & Contoh Penggunaan di Dunia Nyata
- Tabel Dokumentasi Selector Urutan List
- Kesimpulan dan Rekomendasi
1. Memahami Cara Kerja Logika Kombinasi CSS
CSS bergerak menggunakan prinsip Kondisi Struktural. Ketika kita menggabungkan dua atau lebih selector (misalnya menggunakan fungsi negasi :not() bersamaan dengan fungsi urutan :nth-child()), browser akan membaca kode tersebut layaknya gerbang logika (AND / OR / NOT Gate) pada bahasa pemrograman backend.
Sebagai contoh, ekspresi li:not(:first-child):nth-child(even) dianalisis oleh peramban dengan urutan sebagai berikut: cari semua elemen li, saring hanya yang berada di urutan genap (2, 4, 6), kemudian coret dari daftar jika elemen genap tersebut secara kebetulan bertindak sebagai anak pertama di dalam rumpunnya. Kemampuan berpikir deklaratif seperti inilah yang membuat kode kita menjadi sangat ringkas dan efisien.
2. Petunjuk & Contoh Penggunaan di Dunia Nyata
Untuk mempermudah implementasi, berikut adalah 2 skenario umum pemanfaatan logika CSS ini pada tata letak antarmuka (UI) website modern:
Skenario A: Membuat Efek "Read More" Otomatis Tanpa Script
Jika Anda memiliki daftar artikel panjang yang ditarik dari database, namun hanya ingin menampilkan 3 item pertama saja demi keindahan layout halaman utama, gunakan logika pembatasan rentang dinamis:
/* Menyembunyikan semua item mulai dari urutan ke-4 dan seterusnya */
.post-list li:nth-child(n+4) {
display: none;
}Skenario B: Desain Grid Majalah Dinamis (Headline Feature)
Anda ingin membuat postingan urutan ke-1 berukuran besar penuh sebagai berita utama (headline), sedangkan postingan nomor 2 dan 3 berjejer rapi di bawahnya menjadi dua kolom:
/* Berita Utama */
.magazine-list li:first-child {
width: 100%;
font-size: 1.8rem;
}
/* Dua Kolom Pendamping di Bawahnya */
.magazine-list li:nth-child(2),
.magazine-list li:nth-child(3) {
width: 50%;
display: inline-block;
}3. Tabel Dokumentasi Selector Urutan List
Elemen Pertama & Terakhir, Urutan Spesifik (1-10), Ganjil & Genap, Rumus Kelipatan & Pola Dinamis, Urutan Mundur dari Bawah, Filter Kombinasi Unik.
| Kategori Selector | Kode CSS (Selector & Properti) | Target Fungsi / Keterangan |
|---|---|---|
| Ujung List | li:first-child { color: red; } |
Mengubah gaya hanya pada **item pertama** (urutan ke-1). |
li:last-child { color: blue; } |
Mengubah gaya hanya pada **item terakhir** di dalam list. | |
| Urutan Angka Spesifik | li:nth-child(1) { font-weight: bold; } |
Target khusus item **ke-1**. |
li:nth-child(2) { font-weight: bold; } |
Target khusus item **ke-2**. | |
li:nth-child(3) { font-weight: bold; } |
Target khusus item **ke-3**. | |
li:nth-child(4) { font-weight: bold; } |
Target khusus item **ke-4**. | |
li:nth-child(5) { font-weight: bold; } |
Target khusus item **ke-5**. | |
li:nth-child(6) { font-weight: bold; } |
Target khusus item **ke-6**. | |
li:nth-child(7) { font-weight: bold; } |
Target khusus item **ke-7**. | |
li:nth-child(8) { font-weight: bold; } |
Target khusus item **ke-8**. | |
li:nth-child(9) { font-weight: bold; } |
Target khusus item **ke-9**. | |
li:nth-child(10) { font-weight: bold; } |
Target khusus item **ke-10**. | |
| Pola Ganjil / Genap | li:nth-child(odd) { background: #f9f9f9; } |
Target semua urutan **ganjil** (1, 3, 5, 7, 9, dst.). Cocok untuk tabel/list belang-belang. |
li:nth-child(even) { background: #eeeeee; } |
Target semua urutan **genap** (2, 4, 6, 8, 10, dst.). | |
li:nth-child(2n+1) { color: green; } |
Rumus matematika untuk mendeteksi urutan **ganjil** (alternatif dari odd). |
|
li:nth-child(2n) { color: orange; } |
Rumus matematika untuk mendeteksi urutan **genap** (alternatif dari even). |
|
| Rumus Kelipatan (n) | li:nth-child(3n) { color: purple; } |
Target setiap **kelipatan 3** (3, 6, 9, 12, dst.). Angka 3 bisa diganti sesuai kebutuhan. |
li:nth-child(3n+1) { color: brown; } |
Target kelipatan 3 **ditambah 1** (item ke-1, 4, 7, 10, dst.). | |
li:nth-child(n+5) { display: none; } |
Menargetkan item ke-5 **dan seterusnya** (5, 6, 7, 8... sampai habis). Sering dipakai untuk menyembunyikan list yang terlalu panjang. | |
li:nth-child(-n+3) { background: yellow; } |
Menargetkan **hanya 3 item pertama** (1, 2, dan 3). Rumus minus membatasi jangkauan dari atas. | |
| Hitung Mundur (Dari Bawah) | li:nth-last-child(1) { color: pink; } |
Target item **nomor 1 dari bawah** (sama dengan :last-child). |
li:nth-last-child(2) { color: teal; } |
Target item **nomor 2 dari bawah** (kedua terakhir). | |
li:nth-last-child(odd) { background: #ccc; } |
Target urutan **ganjil jika dihitung mundur** dari elemen paling bawah. | |
| Selector Tingkat Lanjut | li:not(:first-child) { margin-top: 10px; } |
Target **semua item KECUALI item pertama**. Berguna memberi jarak antar-item tanpa merusak elemen paling atas. |
li:nth-child(unsupported) atau li:only-child { color: gold; } |
Target item jika dia **satu-satunya elemen** di dalam list tersebut (tidak punya saudara). | |
li:nth-of-type(2) { font-style: italic; } |
Target elemen berjenis li yang **kedua**, mengabaikan jika ada elemen tag lain disekitarnya. |
|
ol li::marker { color: red; font-size: 20px; } |
Target khusus untuk **mengubah gaya angka/bullet bawaan** list secara langsung tanpa menyentuh teksnya. |
Tabel Logika Tingkat Lanjut
Logika Penegasan & Kombinasi, Rentang & Batasan (Range), Hubungan Antar Saudara (Sibling Logic), Kuantitas & Kondisional.
| Kategori Logika | Kode CSS (Kombinasi Selector) | Logika / Target Hasil Spesifik |
|---|---|---|
| Logika Penegasan (Pengecualian) | li:not(:first-child):nth-child(even) { background: #eee; } |
Menargetkan semua elemen **genap, KECUALI jika elemen genap itu adalah elemen pertama** (berguna jika struktur HTML dinamis). |
li:not(:last-child) { border-bottom: 1px solid #ccc; } |
Memberikan garis pembatas bawah untuk **semua item, KECUALI item terakhir**. Membuat tampilan list lebih bersih. | |
li:not(:nth-child(-n+3)) { display: none; } |
Menyembunyikan **semua elemen, KECUALI 3 elemen pertama**. Sangat efisien untuk fitur *read more* instan tanpa Javascript. | |
li:not(:nth-child(3n)) { opacity: 0.5; } |
Membuat buram **semua elemen, KECUALI elemen kelipatan 3** (3, 6, 9, dst). | |
li:not(:first-child):not(:last-child) { color: gray; } |
Menargetkan hanya **elemen yang berada di tengah-tengah** (mengabaikan elemen paling atas dan paling bawah). | |
| Logika Rentang (Range Selection) | li:nth-child(n+2) { margin-top: 5px; } |
Menargetkan **item ke-2 dan semua setelahnya** (2, 3, 4, dst). Item pertama bersih dari margin atas. |
li:nth-child(n+3):nth-child(-n+7) { background: yellow; } |
Mengisolasi rentang tertentu. Hanya menargetkan **dari item ke-3 sampai item ke-7**. | |
li:nth-child(2n+3):nth-child(-n+9) { color: red; } |
Kombinasi rentang dan kelipatan. Hanya menargetkan **item ganjil yang berada di antara urutan ke-3 hingga ke-9** (3, 5, 7, 9). | |
li:nth-last-child(n+4) { color: blue; } |
Menargetkan **semua elemen, kecuali 3 elemen terakhir dari bawah** (menghitung mundur). | |
li:nth-child(n+5):nth-last-child(n+5) { background: pink; } |
Mengiris bagian tengah ekstrem. Hanya memilih elemen yang **minimal berjarak 5 item dari atas DAN 5 item dari bawah**. | |
| Logika Relasi & Tetangga | li:first-child + li { font-weight: bold; } |
Menggunakan *Adjacent Sibling*. Hanya menargetkan **tepat satu elemen setelah elemen pertama** (pasti elemen ke-2). |
li:nth-child(3) ~ li { color: green; } |
Menggunakan *General Sibling*. Menargetkan **semua elemen yang berada di bawah/setelah elemen ke-3** (4, 5, 6, dst). | |
li:hover + li { background: #f0f0f0; } |
Logika interaktif. Ketika sebuah item diarahkan kursor (*hover*), maka **item tepat di bawahnya** yang akan berubah warna. | |
li:has(+ li:hover) { background: #e0e0e0; } |
Logika induk/saudara modern (CSS Relational). Ketika sebuah item di-*hover*, maka **item tepat di atasnya** yang akan berubah warna. | |
| Logika Kuantitas (Jumlah Elemen) | li:nth-last-child(n+5), li:nth-last-child(n+5) ~ li { color: purple; } |
*Quantity Query*. Gaya ini hanya akan aktif **jika total seluruh list berjumlah 5 item atau lebih**. Jika kurang, kode diabaikan. |
li:nth-last-child(-n+3):first-child, li:nth-last-child(-n+3):first-child ~ li { color: orange; } |
*Reverse Quantity*. Gaya ini hanya akan aktif **jika total seluruh list berjumlah maksimal 3 item atau kurang**. | |
li:only-of-type { list-style-type: none; } |
Hanya aktif jika di dalam penampung tersebut **hanya ada 1 buah elemen li**. Gunanya menghapus bullet jika list tidak punya cabang. |
|
li:empty { display: none; } |
Logika konten. Otomatis **menyembunyikan item list yang kosong** atau tidak sengaja terbuat tanpa teks/data di HTML. |
Tabel Logika Tingkat Lanjut 2
Logika Kuantitas Spesifik (Exact Quantity), Logika Kelompok / Slicing Kompleks, Logika Interval Lompat (Staggered Pattern), Logika Pseudo-Class Kombinasi (:is / :where), Logika Relasional tingkat Dewa (:has), Logika Fokus Konten Struktural, Logika Kosong Turunan, Logika Rentang Dinamis Terbalik
| Nama Logika / Kasus | Kode CSS (Advanced Selector) | Penjelasan Logika Detailnya |
|---|---|---|
| Memilih List Jika Hanya Jumlahnya Tepat X | li:nth-last-child(4):first-child, li:nth-last-child(4):first-child ~ li { color: cyan; } |
**Logika Presisi:** Efek ini hanya akan aktif di **semua item**, tapi jika hanya total list-nya **tepat ada 4 item**. jika ada 3 atau 5 item, semua kodenya mati. |
| Memilih Kelompok 3 Item Setiap Baris (Grid Row) | li:nth-child(3n+1):nth-last-child(-n+3), li:nth-child(3n+1):nth-last-child(-n+3) ~ li { background: yellow; } |
**Logika Baris Terakhir:** Otomatis mencari dan memilih **baris paling terakhir** di dalam layout list 3 kolom, tidak peduli seberapapun jumlah totalnya. |
| Pola Catur Ganjil-Genap Ganti Setiap 2 Baris | li:nth-child(4n+1), li:nth-child(4n+2) { background: #eee; } |
**Logika Paket:** Membuat pola belang yang tidak cuma satu-satu, tapi **dua-baris dua-baris** (item 1-2 warnanya A, item 3-4 warnanya B, item 5-6 warnanya A, dst). |
| Pengecualian Massal di dalam Urutan | li:nth-child(even):not(:is(:first-child, :last-child, :nth-child(6))) { Card-style; } |
**Logika Multi-Filter:** Memilih semua item **genap**, tapi langsung nge-blok supaya **item pertama, item terakhir, dan item nomor 6** tidak ikut ter-edit. Lebih ringkas daripada `:not` tumpuk. |
| Menargetkan Item Atas & Bawah Yang Di-Hover | li:hover + li, li:has(+ li:hover) { transform: scale(1.1); } |
**Logika Tetangga Ganda:** Efek "Symmetrical Focus". Saat mengarahkan cursor pada satu item, **item posisi sebelumnya (di atasnya) dan item setelahnya (di bawahnya)** akan ikut berubah bersama. |
| Memilih List Yang Punya Anak Judul (Heading) | li:has(h1, h2, h3):nth-child(odd) { border-left: 5px solid red; } |
**Logika Konten Bertingkat:** Hanya memilih item **urutan ganjil yang di dalam tag-nya punya sub-judul (H1/H2/H3)**. Jika ganjil tapi isinya hanya teks biasa, bakal diabaikan. |
| Menghilangkan List Yang Isinya Cuma Spasi / Enter | li:not(:has(*)):blank, li:empty { display: none; } |
**Logika Pembersih Otomatis:** Jika ada item list yang kosong atau cuma isi spasi gara-gara *error* CMS/database, otomatis disembunyikan supaya layout tetap rapi. |
| Memilih Semua Item Kecuali 5 Terakhir Dari Bawah | li:nth-last-child(n+6) { color: green; } |
**Logika Bottom-Cut:** Mengabaikan 5 item paling bawah, dan otomatis memilih **semua sisa item yang ada di atasnya**, tidak peduli seberapapun banyaknya jumlah list. |
Tabel Standar
Sistem Angka (Numeric), Huruf & Abjad (Alphabetic), Angka Romawi & Klasik, Simbol Bullet, Properti Pendukung
| Kategori | Nilai / Properti CSS | Tampilan Penanda | Contoh Hasil / Fungsi |
|---|---|---|---|
| Sistem Angka (Numeric) | decimal |
Angka biasa (Bawaan <ol>) |
1, 2, 3, 4, ... |
decimal-leading-zero |
Angka dengan nol di depan | 01, 02, 03, 04, ... | |
arabic-indic |
Angka Arab-Indik | ١, ٢, ٣, ٤, ... | |
bengali |
Angka Bengali | ১, ২, ৩, ৪, ... | |
cambodian / khmer |
Angka Khmer | ١, ٢, ٣, ٤, ... | |
devanagari |
Angka Devanagari | १, २, ३, ४, ... | |
georgian |
Angka tradisional Georgia | α, β, γ, δ, ... | |
gujarati |
Angka Gujarati | ૧, ૨, ૩, ૪, ... | |
gurmukhi |
Angka Gurmukhi | ੧, ੨, ੩, ੪, ... | |
kannada |
Angka Kannada | ೧, ೨, ೩, ೪, ... | |
lao |
Angka Lao | ໑, ໒, ໓, ໔, ... | |
malayalam |
Angka Malayalam | ൧, ൨, ൩, ൪, ... | |
mongolian |
Angka Mongolia | ᠑, ᠒, ᠓, ᠔, ... | |
myanmar |
Angka Myanmar | ၁, ၂, ၃, ၄, ... | |
oriya |
Angka Oriya | ୧, ୨, ୩, ୪, ... | |
persian |
Angka Persia | ۱, ۲, ۳, ۴, ... | |
telugu |
Angka Telugu | ౧, ౨, ౩, ౪, ... | |
thai |
Angka Thai | ๑, ๒, ๓, ๔, ... | |
tibetan |
Angka Tibet | ༡, ༢, ༣, ༤, ... | |
| Huruf & Abjad (Alphabetic) | lower-alpha / lower-latin |
Huruf kecil Latin | a, b, c, d, ... |
upper-alpha / upper-latin |
Huruf besar Latin | A, B, C, D, ... | |
lower-greek |
Huruf kecil Yunani | α, β, γ, δ, ... | |
hiragana |
Huruf Hiragana (Jepang) | あ, い, う, え, ... | |
hiragana-iroha |
Urutan Iroha lama (Jepang) | い, ろ, は, ni, ... | |
katakana |
Huruf Katakana (Jepang) | ア, イ, ウ, エ, ... | |
katakana-iroha |
Urutan Iroha Katakana | イ, ロ, ハ, ニ, ... | |
| Romawi & Klasik (Ideographic) | lower-roman |
Angka Romawi kecil | i, ii, iii, iv, ... |
upper-roman |
Angka Romawi besar | I, II, III, IV, ... | |
armenian |
Penomoran Armenia | Ա, Բ, Գ, Դ, ... | |
hebrew |
Penomoran Ibrani | א, ב, ג, ד, ... | |
cjk-ideographic |
Karakter ideografik Asia Timur | 一, 二, 三, 四, ... | |
cjk-earthly-branch |
Sistem 12 Batang Bumi | 子, 丑, 寅, 卯, ... | |
cjk-heavenly-stem |
Sistem 10 Batang Langit | 甲, 乙, 丙, 丁, ... | |
| Simbol Bullet (Uls) | disc |
Lingkaran hitam padat (Bawaan <ul>) |
● ● ● |
circle |
Lingkaran kosong | ○ ○ ○ | |
square |
Kotak hitam padat | ■ ■ ■ | |
none |
Tanpa penanda sama sekali | (Kosong) | |
| Properti Pendukung List | list-style-position |
inside / outside |
Mengatur posisi penanda di dalam atau di luar kotak teks. |
list-style-image |
url('gambar.png') |
Mengganti penanda standar dengan gambar kustom. | |
list-style |
Shorthand property | Menggabungkan tipe, posisi, dan gambar dalam satu baris kode. |
4. Kesimpulan dan Rekomendasi
Keselarasan dalam menyusun logika selektor CSS terbukti mampu memangkas beban kerja JavaScript secara signifikan pada sisi klien (client-side). Dengan menyerahkan tugas manipulasi urutan elemen langsung kepada mesin rendering bawaan browser, performa pemuatan halaman web Anda akan menjadi jauh lebih ringan dan responsif.
Praktik terbaik (best practice) saat bermain dengan logika tingkat lanjut ini adalah menjaga agar struktur HTML Anda tetap konsisten. Hindari menyisipkan elemen asing di luar tag anak yang semestinya agar rantai kalkulasi matematika selector tidak terputus di tengah jalan.