selector di CSS

Sumber : tempatberbagi
Mumpung postingan sebelumnya ngobrolin tentang css, kita lanjutkan saja sedikit tambahan tentang penggunaan selector di css. Apa itu selector? selector merupakan blok kumpulan dari property yang memiliki satu kesatuan fungsi. Untuk membuat sebuah selector memiliki beberapa ketentuan yang harus diperhatikan yaitu:

1. Pemberian nama selector itu bebas, tetapi harus bisa dipertanggung jawabkan
2. Nama sebuah selector tidak bole memiliki spasi
3. Nama selector tidak boleh diawali dengan bilangan/angka
4. Nama selector satu dengan yang lainnya tidak boleh sama (uniq)
5. Nama selector bersifat case sensitif (huruf besar dan huruf kecil dibedakan)
6. Pembuatan Nama selector harus mudah diingat dan jangan terlalu panjang

Harap diperhatikan dari ketentuan-ketentuan diatas, apabila melanggar dari ketentuan diatas maka selector anda tidak akan berfungsi atau selector anda akan tidak berjalan dengan baik.
Selector nantinya akan terbagi menjadi tiga jenis selector, yaitu:

1. Selector ID, selector ini bersifat uniq karena digunakan/dipanggil sekali saja. Untuk selector ini akan diawali dengan tanda hash atau tanda pagar (#)
2. Selector CLASS, selector ini bisa digunakan/dipanggil berulang kali atau lebih dari sekali. Untuk selector ini di tandai atau diawali dengan tanda titik (.)
3. Selector TAG STANDAR HTML, selector yang khusus digunakan untuk tag standar HTML. selector ini dikhususkan untuk tag-tag standar html. Tanpa diawali dengan tanda hash atau tanda titik, jadi diawali dengan kosongan.

Contoh penggunaan selector ID :

1    2 3

#nama_selector{property:value;} #title{property:value;} #menu{property:value;}

Cara pemanggilan di HTML

1 2 3

<div id="nama_selector">content diletakkan disini</div>   <div id="title">content diletakkan disini</div>   <div id="menu">content diletakkan disini</div>

Contoh penggunaan selector CLASS :

1    2 3

.nama_selector{property:value;} .judul{property:value;} .test_coba{property:value;}

Cara pemanggilan di HTML

1    2 3

<div class="nama_selector">content diletakkan disini</div> <div class="judul">content diletakkan disini</div> <div class="test_coba">content diletakkan disini</div>

Contoh penggunaan selector TAG STANDAR HTML:

1    2 3

em{property:value;} br{property:value;} h1{property:value;}

Cara pemanggilan di HTML

1    2

<pre<em>content diletakkan disini</em> <h1>content diletakkan disini</h1>

Ok! sekian dulu untuk penjelasan tentang selector dasar yang ada di css. Apabila ada yang kurang dimengerti silahkan tanyakan melalui form comment atau mengirimkan message malalui contact form. Happy style guys!

Sumber : tempatberbagi