"Child Selector" dalam CSS, Kripkorn Studios

Tutorial
CSS Tentang artikel ini
Penulis: parasolx -- Mar 03, 2009

Kemas kini: Oct 26, 2011

"Child Selector" atau penetapan pemilihan kelas elemen merupakan perkara yang baru dalam CSS2. Fungsi yang diperkenalkan ini membolehkan pengguna memilih elemen tertentu untuk diaplikasikan stail dan atributnya tanpa perlu melibatkan keseluruhan stail seperti dalam CSS1. Dalam tutorial ini saya akan terangkan lebih lanjut cara penggunaannya.

Bagaimana ia berfungsi

Penggunaan pemilihan kelas atau "child selector" begitu mudah dan senang hanya dengan penggunaan tatatanda lebih besar ">" dan perlu digunakan di antara 2 elemen kelas. Sebagai contoh:

body > p { color: green; }

Penetapan arahan ini akan menyebabkan sebarang perenggan (paragraph) yang terkandung dalam elemen body akan ditukarkan warna teksnya kepada hijau. Oleh itu, sekiranya teks yang ditulis di dalam elemen <div> atau <table> di dalam elemen <body> tidak akan mengalami kesan ini.

Apa yang berbeza dari sebelum ini? Sebagai contoh, dalam CSS1, pemilihan kelas seperti body p, akan memberikan kesan kepada sebarang perenggan tidak mengira elemen p itu berada di dalam elemen apa sekalipun sama ada <div>, <table> atau sebarang sel. Lebih senang difahami, pemilihan kelas sebelum ini lebih menyeluruh dan tidak spesifik.

Pemilihan spesifik hierraki kelas

Dengan menyatakan secara berantai untuk pemilihan kelas, kita berupaya untuk memilih elemen yang lebih spesifik dalam mengaplikasikan elemen tertentu dalam dokumen. Sebagai contoh, kita mahu aplikasikan teks berwarna merah untuk setiap perenggan di dalam elemen <div> dan elemen <div> tersebut berada di dalam elemen <div> yang lain. Oleh itu, arahan pemilihan kelas adalah seperti ini:

body > div > div > p { color: red; }

Berdasarkan kepada arahan di atas, sekiranya teks tersebut terkandung di dalam 3 elemen <div>, maka tiada kesan stail teks merah akan diaplikasikan.

Hierraki pengelasan

Kepada yang masih lagi keliru mengenai hierraki pengelasan yang saya bicarakan sebelum ini, jom kita kaji dengan lebih mendalam seketika. Untuk memudahkan penerangan, saya akan kemukan satu teori mudah iaitu "cabang-cabang pokok". Seperti yang kita tahu, sebatang pokok akan bermula dengan dahan dan mula berkembang melalui cabang-cabang dahan kemudian ranting kemudian daun. Dokumen HTML juga begitu, bermula dari <body> dan seterusnya berkembang sehingga ditutup dengan elemen </body>.

Pertama, saya akan huraikan mengenai perhubungan induk-anak. Berdasarkan kepada gambar di sebelah, elemen body mempunyai dua anak iaitu elemen p dan elemen ul. Elemen p pula mempunyai 2 anak iaitu em dan strong. Elemen p ini mempunyai satu induk sahaja iaitu body.

Hierraki ini akan berkembang dan berkembang sehingga menjadi satu jaringan yang lebih kompleks tetapi yang penting setiap eleman hanya ada satu induk tetapi boleh merangkumi banyak anak-anak atau pun cabang.

Oleh itu, dalam proses pemilihan kelas ini, setiap elemen dalam hierraki ini perlu diambil kira dan tidak boleh dilangkau walaupun satu elemen kerana setiap satu elemen dihubungkan antara satu sama lain dan sekiranya tertinggal satu elemen, pemilihan kelas untuk stail akan diabaikan.

Rujuk kembali gambar tersebut, perhatikan bahawa elemen p mempunyai anak-anak kelas em, strong, a dan em. Sekiranya kita ingin target pada em, maka induk dan anak perlu dipautankan bersama; a > em. Induk kepada a pula adalah strong; strong > a > em dan akhirnya adalah induk kepada strong; p > strong > a > em

Pengelasan anak dan penggunaan

Dalam penerangan sebelum ini, setiap pemilihan kelas elemen yang dinyatakan dalam CSS hanya memberikan kesan kepada elemen yang mengikut heirraki pengelasan. Sebagai contoh:

div ol > li em { color: red }

Arahan ini akan diaplikasikan sekiranya sebarang teks yang dirangkumi dengan elemen em di dalam senarai bernombor yang juga terkandung dalam sebarang elemen div. Tips, kita boleh menulis sama ada mempunyai ruang atau tidak untuk tatatanda ">".

<body>
  <ol>
    <li>Teks yang mempunyai em <em>TIDAK</em> merah.</li>
  </ol>
  <div>
    <ol>
      <li>Look, a list:
        <ul>
          <li>Teks yang mempunyai em <em>MENJADI</em> merah.</li>
        </ul>
      </li>
    </ol>
  </div>
</body>

Pengelasan secara global

Dalam kes kali ini pula, kita akan gunakan pengelasan pemilihan kelas secara global yang mana boleh diaplikasikan untuk menghasilkan kesan yang lebih menarik.

Katakan arahan sebegini:

body > * { font-weight: bold; }

Arahan ini akan mengaplikasikan sebarang teks dalam elemen selepas body dan hanya diberikan kepada elemen ini sahaja.

body > * > * { font-weight: bold; }

Arahan ini pula berbeza dengan di atas. Aplikasi arahan CSS di atas hanya akan diaplikasikan kepada elemen yang dirangkum sebanyak 2 lapisan ke dalam sahaja. Pada lapisan elemen pertama langsung tidak diaplikasikan.

body > * > H1 { font-style: italic; }

Arahan ini pula akan di aplikasikan pada elemen H1, atau heading yang terangkum dalam apa jua elemen sekali pun selepas elemen body.