FluentStack

Cascade dan Specificity Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner35 menitBahasa Indonesia

Cascade dan Specificity Dasar

Pahami kenapa aturan CSS tertentu menang ketika beberapa aturan mengatur elemen yang sama.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami cascade sebagai proses pemilihan aturan CSS
  • Memahami specificity dasar antara id, class, dan element selector
  • Melatih debugging CSS sederhana tanpa langsung memakai !important
CSSCascadeSpecificityDebugging

Isi lesson

7 blok
  1. 1.
    Kadang satu elemen mendapat beberapa aturanBelum selesaiWajib
  2. 2.
    Class selector bisa menang dari element selectorBelum selesaiWajib
  3. 3.
    Urutan kekuatan yang cukup untuk awalBelum selesaiWajib
  4. 4.
    Jangan langsung memakai !importantBelum selesaiWajib
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Kadang satu elemen mendapat beberapa aturan

Wajib

Satu elemen HTML bisa terkena beberapa aturan CSS sekaligus. Browser perlu menentukan aturan mana yang berlaku. Cascade adalah proses browser memilih aturan yang menang. Kamu belum perlu menghafal detail angka specificity. Mulai dari aturan praktis dulu.

Bagian ini memengaruhi progres lesson.

Class selector bisa menang dari element selector

Wajib
html
<p class="intro">Belajar cascade CSS.</p>

<style>
  p {
    color: gray;
  }

  .intro {
    color: blue;
  }
</style>

Paragraf ini menjadi blue karena .intro adalah class selector dan lebih spesifik daripada selector p. Keduanya mengatur color, tetapi selector yang lebih spesifik biasanya menang.

Bagian ini memengaruhi progres lesson.

Urutan kekuatan yang cukup untuk awal

Wajib

Untuk tahap pemula, ingat urutan sederhana ini: id selector lebih kuat, class selector lebih kuat daripada element selector, dan element selector adalah yang paling lemah dari tiga ini. Jika selector punya kekuatan yang mirip, aturan yang muncul belakangan bisa menang.

Bagian ini memengaruhi progres lesson.

Peringatan

Wajib

Jangan langsung memakai !important

Saat CSS tidak sesuai harapan, jangan langsung menambahkan !important. Cek dulu target selector, kekuatan selector, dan urutan rule. Ini membuat debugging CSS lebih sehat sejak awal.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Jika <p class="intro"> punya dua aturan: p { color: gray; } dan .intro { color: blue; }, warna mana yang biasanya menang?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Debug cascade CSS sederhana

Latihan memperbaiki konflik CSS sederhana tanpa memakai !important.

Tujuan awal: Perbaiki style agar paragraf dengan class intro terlihat menonjol.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis4 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Cascade menentukan aturan CSS yang berlaku.
  • Specificity membantu browser memilih aturan yang lebih kuat.
  • Class lebih spesifik daripada element selector.
  • Jangan langsung memakai !important saat bingung.
  • Berikutnya, kamu akan menguji pemahaman CSS Core Mechanics sebelum lanjut ke box model dan spacing.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Kadang satu elemen mendapat beberapa aturan.

Memuat progresReview module