Apa itu Pemilih Keturunan CSS?

Struktur dokumen HTML mirip dengan pohon keluarga. Di keluarga Anda, Anda memiliki orang tua Anda dan orang lain yang datang sebelum Anda. Ini nenek moyangmu. Anak-anak dan mereka yang datang setelah Anda di pohon itu adalah keturunan Anda. HTML bekerja dengan cara yang sama. Elemen yang ada di dalam elemen lain adalah keturunan mereka. Misalnya, karena hampir setiap elemen HTML ada di dalam tag , mereka akan menjadi keturunan dari elemen tersebut. Hubungan ini penting untuk dipahami ketika Anda mulai bekerja dengan CSS dan perlu menargetkan elemen tertentu untuk menerapkan gaya visual.

Penyeleksi Keturunan CSS

Pemilih keturunan CSS berlaku untuk elemen yang ada di dalam elemen lain (atau lebih tepatnya dinyatakan, elemen yang merupakan turunan dari elemen lain). Misalnya, daftar yang tidak diurutkan memiliki tag dengan tag sebagai turunan. Mari kita gunakan HTML berikut sebagai contoh:

• ini adalah tautan

  Tag LI adalah turunan dari tag UL. Tag A adalah turunan dari kedua LI (anak keturunan) dan UL (cucu keturunan) tag. Jika Anda berpikir tentang memikirkan hal ini menggunakan contoh pohon keluarga,

  akan menjadi orang tua,
  • akan menjadi anak elemen itu, dan akan menjadi anak dari
  • dan cucu dari
    .

    Jadi bagaimana Anda menargetkan elemen tertentu di halaman web menggunakan pemilih keturunan ini? Pertama, Anda harus mendefinisikan penyeleksi keturunan dengan menggunakan dua (atau lebih) jenis pemilih yang dipisahkan oleh spasi.

    li a {text-decoration: none; }

    Dalam contoh itu, gaya hanya akan berlaku untuk elemen tautan () yang merupakan turunan dari elemen daftar-item (

    • ). Semua tautan lain pada halaman yang bukan turunan dari daftar item tidak akan mendapatkan gaya ini.

      Satu hal penting untuk diingat adalah bahwa tidak peduli berapa banyak tag mereka di antara tag yang mungkin Anda gunakan di pemilih keturunan Anda. Jika elemen kedua diapit di mana saja di dalam elemen pertama maka akan dipilih sebagai keturunan.

      Jika Anda ingin memilih semua jangkar yang diturunkan dari elemen ul, Anda akan menulis:

      ul a {text-decoration: none; }

      Sekarang, gaya ini akan berlaku untuk tautan apa pun yang merupakan turunan dari item daftar. Anda juga bisa menulis pemilih ini

      ul li a {text-decoration: none; }

      Ini adalah pemilih keturunan yang menggunakan lebih dari dua jenis pemilih. Dalam hal ini, ini akan berlaku untuk tautan yang ada di dalam sebagai daftar-item dan juga di dalam daftar yang tidak diurutkan.

      Menggunakan Pemilih Kelas dan Pemilih ID

      Selektor yang Anda turunkan tidak harus selalu bertipe keturunan. Misalnya, bayangkan Anda memiliki area situs (seperti divisi) dengan atribut ID "billboard". Anda dapat menyiapkan pemilih keturunan dari ID itu:

      #billboard ul {background-color: #ccc; }

      Ini akan memberi style pada daftar tak berurut yang merupakan turunan dari elemen dengan ID "billboard". Anda dapat melakukan hal yang sama untuk nilai-nilai kelas.

      div.billboard ul {background-color: #ccc; }

      Ini mengasumsikan bahwa divisi memiliki nilai kelas "billboard". CSS di atas akan memberi style elemen

      di dalam setiap divisi yang memiliki nilai kelas ini.

      Anda bisa menjadi benar-benar berat dan teliti dengan pemilih keturunan. Misalnya, jika Anda menggunakan Dreamweaver untuk menulis kode HTML Anda, ada pengaturan ketika Anda menambahkan aturan CSS baru yang akan membuat selektor secara otomatis berdasarkan penempatan kursor Anda pada halaman tersebut. Apa yang dilakukan Dreamweaver dalam hal ini adalah membuat pemilih keturunan yang sangat verbose dan panjang. Spesifisitas seperti itu tidak perlu bagi CSS Anda untuk bekerja. Apa yang ingin Anda lakukan adalah menemukan keseimbangan antara pemilih keturunan yang cukup spesifik sehingga Anda dapat menelusuri ke elemen yang tepat yang Anda butuhkan (tanpa gaya yang tidak ingin Anda pengaruh) tanpa aturan CSS yang memiliki pemilih yang terlalu berlebihan besar.