Jenis Jenis Selector pada CSS

Pada tutorial ini kita akan membahas tentang jenis jenis selector yang ada pada CSS, namun hanya selector yang sering digunakan saja. Selector adalah pengikat yang mengikat antara elemen HTML terhadap property CSS yang akan dihubungkan kepadanya. Contoh, terdapat 2 elemen p.

dan

Dan kita hanya ingin merubah elemen <p> yang memiliki class “tes”. Maka anda dapat menghubungkannya dengan menggunakan selector class pada CSS. Yakni :

Ada banyak sekali jenis selector yang disediakan oleh CSS. Namun hanya ada 3 jenis selector yang biasa digunakan, seperti selector tag, selector class, dan selector id.

Selector tag

Selector yang dijadikan acuan adalah tag – tag HTML seperti tag <p>, tag <table>, tag <b> dan tag – tag HTML lainnya.

Di bawah ini adalah contoh kode sumbernya :

dan di bawah ini adalah hasil dari kode sumber di atas :

jenis jenis selector pada css

Selector id

Selector yang dijadikan acuan adalah NAMA yang sudah dirancang oleh Developer sebagai Selector id. Pemberian nama pada id ini tergantung dari kegunaannya, berfungsi untuk apa. Umumnya id digunakan dalam hal tata layout website, seperti heading, article, footer, section dan menu-bar.

Untuk pembuatannya digunakan symbol tanda pagar (#).

#namaID{property: nilai-property;}

Di bawah ini adalah contoh dari kode sumber di atas :

dan di bawah ini adalah hasil dari kode sumber di atas :

Selector ID pada CSS

Atribut id hanya dapat memanggil 1 nama id pada CSS.

Selector class

Untuk membuat selector class, anda hanya tinggal menaruh tanda titik di depan nama class yang kalian ingin jadikan sebagai nama class tersebut. Bedanya dengan selector id, class ini dapat dipanggil berkali – kali dalam 1 elemen.

Pembuatannya adalah dengan mengunakan tanda titik (.namaClass).

.namaClass{property: nilai-property;}

Di bawah ini adalah contoh kode sumbernya :

dan di bawah ini adalah hasil dari kode sumber di atas :

Selector Class pada CSS

Atribut Class pada HTML dapat memanggil lebih dari 1 nama Class pada CSS.

* (Selector Bintang)

Selector ini bersifat global, artinya pendeklarasiannya berlaku untuk semua elemen – elemen HTML dalam sebuah halaman website.

*{property: nilai-property;}

Di bawah ini adalah contoh kode sumber dari Selector Bintang

Selector Bintang pada CSS


Demikian tutorial dari jenis jenis selector pada CSS, silahkan kunjungi tutorial CSS lainnya seperti apa itu prefix pada CSS, fungsi border pada CSS, dan CSS 2 Dimensi.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us