Pemilihan Pemilihan Anak-Anak CSS

Pemilih turunan (descendant selector) disebut pula pemilih termasuk.

Selector turunan dapat memilih elemen yang adalah turunan dari suatu elemen lain.

Pilih Elemen Berdasarkan Konteks

Kami boleh menentukan selector turunan untuk membuat beberapa aturan, supaya aturan ini berfungsi dalam struktur dokumen tertentu, tetapi tak berfungsi di struktur lain.

Sebagai contoh, jika ingin menerapkan gaya hanya kepada elemen em di dalam h1, boleh ditulis seperti berikut:

h1 em {color:red;}

Aturan di atas akan membuat teks elemen em yang adalah turunan h1 menjadi merah. Teks em lainnya (seperti di dalam paragraf atau kutipan blok) tak akan dipilih oleh aturan ini:

<h1>Ini adalah judul <em>penting</em></h1>
<p>Ini adalah paragraf <em>penting</em> ini.</p>

Coba Sendiri

Tentu, boleh menempatkan class attribute di setiap elemen em yang dapat ditemukan di dalam h1, tetapi dengan jelas, efisiensi selector turunan lebih tinggi.

Pengertian Gramatika

Dalam selector turunan, pihak kiri aturan pilih secara otomatis mencakup dua atau lebih selector yang dipisahkan dengan spasi. Spasi di antara selector adalah penggabung (combinator). Setiap penggabung spasi dapat diartikan sebagai '... di ... menemukan', '... sebagai bagian dari ...', '... sebagai turunan dari ...', tetapi harus dibaca dari kanan ke kiri selector.

Sebagai contoh, selector h1 em dapat diartikan sebagai 'setiap elemen em yang adalah turunan h1'. Jika ingin membaca selector dari kiri ke kanan, boleh diganti dengan ungkapan berikut: 'Semua h1 yang mengandungi em akan menerapkan gaya berikut kepada em ini'.

Penerapan Spesifik

Fungsi selector turunan sangat kuat. Dengan dia, boleh membuat tugas yang tak dapat dilakukan di HTML menjadi mungkin.

Dipercayai ada sebuah dokumen, di mana ada sidebar dan area utama. Latar belakang sidebar adalah biru, latar belakang area utama adalah putih, kedua area ini mengandungi daftar pautan. Tidak boleh semua pautan dijadikan biru, kerana begitu pautan biru di dalam sidebar akan tak dapat dilihat.

Pemecahannya adalah untuk menggunakan selector turunan. Dalam keadaan ini, boleh ditetapkan class attribute bernilai sidebar bagi div yang mengandungi sidebar, dan atur class attribute utama menjadi maincontent. kemudian tulis gaya berikut:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

Ada hal yang sering disingkirkan tentang pemilihan turun, yaitu jarak tingkat antara dua elemen dapat berada di tempat yang tak terbatas.

Contohnya, jika ditulis ul em, sintaks ini akan memilih semua elemen em yang warisan dari elemen ul, tanpa mengira tingkat penyanggangan elemen em berapa tinggi.

Kemudian, ul em akan memilih semua elemen em yang ada di dalam tanda di bawah ini:

<ul>
  <li>Item Daftar 1</li>
    <ol>
      <li>Item Daftar 1-1</li>
      <li>Item Daftar 1-2</li>
      <li>Item Daftar 1-3</li>
        <ol>
          <li>Item Daftar 1-3-1</li>
          <li>Item Daftar</li> <em>1-3-2</em></li>
          <li>Item Daftar 1-3-3</li>
        </ol>
      </li>
      <li>Item Daftar 1-4</li>
    </ol>
  </li>
  <li>Item Daftar 2</li>
  <li>Item Daftar 3</li>
</ul>

Coba Sendiri