Pemilihan Pencabut Turun

Selector turunan

Dengan menentukan gaya berdasarkan konteks posisi elemen, Anda dapat membuat penanda menjadi lebih sederhana.

Dalam CSS1, selector yang digunakan untuk menerapkan aturan ini disebut selector konteks (contextual selectors), karena mereka menggantung hubungan konteks untuk menerapkan atau menghindari aturan. Dalam CSS2, mereka disebut selector turunan, tetapi namanya apapun, fungsi mereka sama.

Selector turunan memungkinkan Anda menentukan gaya suatu tag berdasarkan konteks dokumen. Dengan penggunaan yang bijaksana selector turunan, kita dapat membuat kode HTML menjadi lebih bersih.

Contohnya, jika Anda ingin elemen strong dalam daftar menjadi huruf miring, bukan huruf tebal seperti biasa, Anda dapat menentukan selector turunan seperti ini:

li strong {
    font-style: italic;
    font-weight: normal;
  }

Perhatikan hubungan konteks kode biru yang ditandai dengan <strong>:

<p><strong>Saya adalah huruf tebal, bukan huruf miring, karena saya tidak berada dalam daftar, jadi aturan ini tidak berlaku untuk saya</strong></p>
<ol>
<li><strong>Ini adalah huruf miring. Ini disebabkan karena elemen strong berada di dalam elemen li.</strong></li>
<li>Ini adalah huruf normal.</li>
</ol>

Dalam contoh di atas, hanya elemen strong di dalam elemen li yang berwarna miring, tidak perlu mendefinisikan class atau id khusus untuk elemen strong, kode menjadi lebih sederhana.

Lihat kembali aturan CSS di bawah ini:

strong {
     warna: merah;
     }
h2 {
     warna: merah;
     }
h2 strong {
     warna: biru;
     }

Berikut adalah HTML yang dipengaruhi:

<p>Kata yang disorot kuat di paragraf ini adalah<strong>merah</strong>.</p>
<h2>Judul sub ini juga merah.</h2>
<h2>Kata yang disorot kuat di judul sub ini adalah<strong>blue</strong>.</h2>

Konten Terkait

Jika Anda memerlukan pemahaman yang mendalam tentang pemilihan pencabut turun, silakan baca konten berikut ini di tutorial tingkat lanjut CodeW3C.com: