Selektor First-Child - Selektor CSS #10

Jika pada postingan sebelumnya kita telah membahas Selektor Child, kali ini kita akan membahas tentang Selektor First-Child. Selektor First-Child yaitu selektor yang hanya memilih sebuah elemen jika dan hanya jika elemen tersebut berada setelah sebuah induk elemen tertentu. Tidak masalah apa induk elemen ini, asalkan elemen yang menjadi first-child tersebut tepat berada setelah induk elemen tersebut.

Selektor first-child mempunyai bentuk yang mirip dengan Selektor Pseudo Elemen. Syntax dari selektor first-child ini adalah sebuah elemen HTML diikuti dengan :first-child.

Sebagai contohnya, p:first-child, selektor ini hanya akan memilih elemen paragraf jika dan hanya jika elemen p ini tepat menjadi first-child (anak pertama) dari sebuah induk elemen tertentu.
<div id="pfirstchild">
<p>. . .</p>
<p>. . .</p>
</div>
Pada kode HTML diatas, elemen p tepat berada setelah selektor ID pfirstchild, maka aturan selektor p:first-child tetap berfungsi pada HTML ini. Namun jika kita meletakkan elemen p ini tidak pada first child dari sebauh induk elemen maka aturan p:first-child tersebut tidak akan berjalan pada browser. Contohnya seperti ini:
<div id="pbukanfirstchild">
<table>
<p>. . .</p>
<p>. . .</p>
</table>
</div>
Pada kode di atas yang menjadi first child adalah elemen table bukan elemen p, maka selektor p:first-child (p sebagai anak pertama) tidak akan berfungsi.

Fungsi Selektor First-Child
Dengan selektor first-child kita dapat membuat sebuah anak dari sebuah induk elemen tertentu untuk mempunyai format tersendiri. Kita dapat menerapkan hal ini untuk mengontrol bagian sub-bab dari sebuah konten HTML.

Kembali ke pokok bahasan tentang jenis-jenis selektor CSS » [link]
Semoga bermanfaat.

3 Comment:

situsonline said...

Pusing aku mikirin kode kode di atas mas.!

abb news said...

kl sdh menyangku perkodean,ampuh neh...

babeltekno said...

mantaps,,, cukup bermanfaat :-D

Post a Comment