Pemilihan Pencabut Derivatif CSS

Selector turunan

Dengan mendefinisikan gaya berdasarkan hubungan konteks elemen di posisinya, Anda dapat membuat tanda lebih ringkas.

Pada CSS1, selector yang digunakan untuk menerapkan aturan ini disebut selector konteks (contextual selectors), karena mereka bergantung pada hubungan konteks untuk menerapkan atau menghindari aturan tertentu. Pada CSS2, mereka disebut selector turunan, tetapi namanya apa pun, fungsi mereka sama.

Selector turunan memungkinkan Anda menentukan gaya suatu tag berdasarkan konteks dokumen. Dengan penggunaan yang tepat selector turunan, kode HTML Anda akan 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 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 elemen strong berada di dalam elemen li.</strong></li>
<li>Ini adalah font biasa.</li>
</ol>

Dalam contoh di atas, hanya elemen strong di dalam elemen li yang diubah huruf miring, tidak perlu menentukan class atau id khusus bagi elemen strong, kode menjadi lebih ringkas.

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 ini juga merah.</h2>
<h2>Kata yang disorot kuat di judul ini adalah<strong>blue</strong>.</h2>

Konten Terkait

Jika Anda memerlukan pemahaman yang mendalam tentang pemilihan pencabut derivatif, silakan baca konten berikut di panduan tingkat tinggi CodeW3C.com: