Pemilih dan Kaskade
Pilih elemen dengan pemilih tipe, kelas, ID, dan atribut. Pahami spesifisitas, pewarisan, dan kaskade untuk memperkirakan gaya mana yang berlaku.
Pemilih dan Kaskade adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu CSS?
CSS (Lembar Gaya Berjenjang) adalah bahasa yang mengatur tampilan visual. Anda menulis aturan — setiap aturan memiliki pemilih yang menargetkan elemen dan blok deklarasi yang berisi pasangan properti-nilai.
selector {
property: value;
another-property: value;
}Pemilih Tipe, Kelas, dan ID
Tiga pemilih mendasar: tipe menargetkan semua elemen dari suatu tag (p), kelas menargetkan elemen yang memiliki kelas (.card), dan ID menargetkan satu elemen berdasarkan ID (#logo). Utamakan kelas — ID memiliki spesifisitas yang sangat tinggi.
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */Pemilih Atribut dan Pseudokelas
Pilih berdasarkan nilai atribut dengan [type="email"]. Gunakan pseudokelas untuk keadaan: :hover, :focus, :active, :checked, :nth-child(), :first-child, :last-child.
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }Kombinator
Kombinator menjelaskan hubungan antara elemen: spasi (turunan), > (anak langsung), + (saudara bersebelahan), ~ (saudara umum).
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */Spesifisitas: Siapa yang Menang?
Saat beberapa aturan menargetkan elemen yang sama, spesifisitas menentukan aturan yang menang. Pemilih ID (0,1,0,0) mengalahkan pemilih kelas (0,0,1,0), yang mengalahkan pemilih tipe (0,0,0,1). Gaya sebaris mengalahkan semuanya. !important mengalahkan semuanya — gunakan sebagai pilihan terakhir.
Menghitung Spesifisitas
Hitung ID, kelas/atribut/pseudokelas, dan tipe secara terpisah. Bandingkan kolom demi kolom. Contoh: #nav .link:hover = (0,1,1,1). .nav a = (0,0,1,1). Yang pertama menang.
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }Kaskade: Urutan Itu Penting
Saat spesifisitasnya sama, aturan yang muncul lebih akhir dalam lembar gaya akan menang. Inilah huruf C dalam CSS — kaskade. Urutan impor dan urutan sumber sama-sama penting.
Pewarisan
Beberapa properti CSS secara bawaan diwariskan — elemen anak menerima nilai elemen induknya tanpa Anda menetapkannya. Properti yang berkaitan dengan teks seperti color, font-family, dan line-height diwariskan. Properti model kotak seperti margin tidak diwariskan.
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}Pemilih :is() dan :where()
:is() dan :where() memungkinkan Anda menulis pemilih ringkas yang cocok dengan salah satu dari sebuah daftar. Perbedaannya: :is() mewarisi spesifisitas tertinggi dari argumennya; :where() selalu memiliki spesifisitas nol.
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}Pemilih Universal *
Pemilih universal * cocok dengan setiap elemen. Pemilih ini umum digunakan dalam reset CSS: *, *::before, *::after { box-sizing: border-box; }, yang membuat model kotak jauh lebih mudah diprediksi.
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}Gaya Bawaan Peramban
Peramban menerapkan lembar gayanya sendiri (lembar gaya agen pengguna) sebelum lembar gaya Anda. Reset CSS (seperti normalize.css) atau lapisan CSS menetralkan bawaan ini sehingga penataan gaya Anda dimulai dari dasar yang diketahui.
Pemeriksaan Singkat
Pemilih mana yang memiliki spesifisitas tertinggi?
Ringkasan: Pemilih dan Kaskade
Targetkan elemen dengan pemilih tipe, kelas, ID, atribut, dan pseudokelas. Spesifisitas menyelesaikan konflik (ID > kelas > tipe). Kaskade memutuskan hasil yang sama dengan menggunakan urutan sumber. Pewarisan secara otomatis meneruskan gaya teks kepada elemen turunan.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pemilih dan Kaskade” gratis?
Ya — teks lengkap “Pemilih dan Kaskade” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pemilih dan Kaskade”?
Pilih elemen dengan pemilih tipe, kelas, ID, dan atribut. Pahami spesifisitas, pewarisan, dan kaskade untuk memperkirakan gaya mana yang berlaku. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Pemilih dan Kaskade” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pemilih dan Kaskade
- Warna, Tipografi, dan Model Kotak
- Dasar Display: block, inline, flex, grid
- Pemosisian: relative, absolute, fixed, sticky