Pemilihan Pemilihan Anak Keturunan CSS

Pemilih turunan (descendant selector) disebut juga pemilih penampung.

Selector kakek dapat memilih elemen yang menjadi kakek dari suatu elemen lain.

Pilih Elemen Berdasarkan Konteks

Kami dapat mendefinisikan selector kakek untuk membuat beberapa aturan yang berfungsi di struktur dokumen tertentu, tetapi tak berfungsi di struktur lain.

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

h1 em {warna:merah;}

Aturan di atas akan menjadikan teks elemen em yang menjadi kakek dari elemen h1 menjadi merah. Teks em lainnya (seperti di dalam paragraf atau kutipan blok) tak akan diambil oleh aturan ini:

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

Coba Sendiri

Tentu, Anda juga dapat menempatkan atribut class pada setiap elemen em yang ditemukan di dalam h1, tetapi dengan jelas, efisiensi selector kakek lebih tinggi.

Penjelasan Gramatika

Dalam selector kakek, bagian kiri aturan selector termasuk dua atau lebih selector yang dipisahkan dengan spasi. Spasi di antara selector adalah operator penggabungan. Setiap operator penggabungan dapat diartikan sebagai '... ditemukan di dalam...', '... adalah bagian dari...', '... adalah kakek...', tetapi harus dibaca dari kiri ke kanan selector.

Dengan demikian, selector h1 em dapat diartikan sebagai 'setiap em yang menjadi kakek dari elemen h1 apapun'. Jika ingin membaca selector dari kiri ke kanan, dapat diganti dengan ungkapan berikut: 'Setiap h1 yang mengandung em akan menerapkan gaya berikut ke em ini'.

Aplikasi Khusus

Fungsi selector kakek sangat kuat. Dengan adanya, dapat menjadikan tugas yang tak dapat dilakukan di HTML menjadi mungkin.

Dipercaya ada sebuah dokumen yang memiliki sidebar dan area utama. Latarbelakang sidebar adalah biru, latarbelakang area utama adalah putih, kedua area ini mengandung daftar tautan. Tidak dapat menjadikan semua tautan berwarna biru, karena hal ini akan membuat tautan biru di sidebar tak terlihat.

Penyelesaian adalah dengan menggunakan selector kakek. Dalam kasus ini, dapat ditetapkan nilai class untuk div yang mengandung sidebar adalah sidebar dan nilai class untuk area utama adalah maincontent. Lalu tulis gaya berikut:

div.sidebar {latarbelakang:biru;}
div.maincontent {latarbelakang:putih;}
div.sidebar a:link {warna:putih;}
div.maincontent a:link {warna:biru;}

Ada hal yang sering diabaikan tentang pemilihan pemilihan keturunan, yaitu jarak tingkat antara dua elemen dapat berada di dalam batas tak tentu.

Contoh, jika ditulis ul em, sintaks ini akan memilih semua elemen em yang warisan dari elemen ul, tanpa menghiraukan tingkat penyanggapan elemen em.

Sebagai contoh, ul em akan memilih semua elemen em yang ada di dalam tanda 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