Apa itu Type Selector?

CSS Selector

Hai, pada kali ini saya akan membahas soal CSS Selector. Tapi sebelum itu saya akan membahas ulang CSS, CSS (Cascade Style Sheet) adalah sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah. Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, background, animasi, dan lain-lain.

Mungkin kalian akan bertanya-tanya "Selector itu apa?" "Gunanya Selector dalam CSS itu apa?".  Nah pada kesempatan ini saya akan kupas tuntas semua pertanyaan ini, berikut penjelasannya.

I. Type Selector

Type Selector digunakan untuk memberikan style / gaya pada halaman web berdasarkan tag / element tertentu. Contohnya :  h1 { font-family: Georgia, serif;}

Pada gambar di atas terdapat h1 sebagai selector lalu ditaruh deklarasi ditandai dengan kurung kurawal lalu diberi properti font-family dan value Georgia, serif beserta diberi titik koma.

Type Selector biasa disebut juga element selector.

II. Attribute Selector

Attribute Selector adalah selector CSS yang digunakan untuk ‘mencari’ elemen HTML dengan memakai nilai atribut dari tag HTML. Untuk menggunakan Attribute Selector, kita menulisnya di dalam tanda kurung siku, Contohnya seperti berikut ini : img[width="200px"] { border: 2px solid red;}

III. Id Selector

ID Selector berguna untuk memilih element berdasarkan ID. Selector ID hanya dapat digunakan oleh satu element saja. Contohnya : #header  { font-family: Arial; }

IV. Class Selector

Selector Class juga dipakai untuk menentukan style / gaya sama seperti ID Selector. Bedanya yaitu jika ID hanya boleh dipanggil sekali saja, class bisa dipanggil lebih dari satu kali. Contohnya: .div1 { width: 200px;}

V. Child Selector

Child Selector merupakan selector CSS yang pemakaiannya di dasarkan pada struktur urutan elemen HTML,  selector ini hanya bisa berlaku ke satu keturunan saja. Karena tag HTML dapat berisi tag lain, maka struktur HTML dapat direpresentasikan sebagai  "pohon keluarga". Contohnya:  div > h2 { font-family: Sans;}

VI. Descendant Selector

Descendant Selector berarti selector yang merupakan turunan dari sesuatu, selector ini bisa berlaku ke seluruh keturunan. Contohnya: div.main h2 {color: yellow;}