Pengertian Selector Pada CSS
Pengenalan CSS Selector
CSS selector adalah salah satu rule set dari Css yang fungsinya tidak berbeda jauh dengan namanya (Selector) yakni memilih suatu elemen yang ingin anda beri gaya atau style css.
Universal Selector
Universal selector berarti memilih semua elemen yang ada pada suatu halaman HTML. Setiap halaman HTML dibangun di atas konten yang ditempatkan di dalam tag HTML. Setiap set tag mewakili elemen pada halaman. Mari kita lihat contoh CSS selector universal berikut :
Tiga baris kode di dalam kurung kurawal (Color, Font-Size, dan line-height) akan berlaku untuk semua elemen pada halaman HTML. Seperti yang terlihat pada contoh, Universal selector dideklarasikan dengan tanda bintang “*”. Kamu juga bisa mengkombinasikan Universal Selector dengan jenis selector yang lain.
Element Type Selector
Juga disebut sebagai "Type selector", selector ini harus cocok dengan satu atau lebih elemen HTML dengan nama yang sama. Maka dari itu, selector nav akan cocok dengan semua elemen HTML nav, dan selector
- akan cocok dengan unordered list (UI) HTML, atau elemen
- .
Berikut ini adalah contoh element type selector untuk mencocokkan semua elemen
- :
Inilah contoh HTML yang akan kita berikan CSS type selector seperti contoh diatas :
Pada contoh diatas, ada 3 element utama. Yaitu 2 Elemen
- dan 1 Elemen
- , sedangkan elemen
Contoh lainnya adalah sebagai berikut :
Pada contoh diatas CSS #para1 (Text-align & Color) hanya berlaku untuk elemen
ID Selector
Id selector menggunakan attribut id pada HTML untuk memilih elemen tertentu.
Id dari elemen bersifat unik dalam suatu laman, jadi Id selector digunakan untuk memilih satu elemen unik.
Untuk memilih elemen dengan id tertentu, tulis karakter hash (#), diikuti dengan id elemen.
Perlu diingat bahwa menentukan nama id tidak boleh diawali dengan angka
Class Selector
Class selector digunakan untuk memilih elemen HTML dengan class atribut tertentu. Untuk memilih elemen dengan class tertentu, tulis karakter titik (.), diikuti dengan nama class.
Contoh : pada contoh kali semua elemen HTML dengan class=”center” akan berwarna merah dan rata tengah.
Anda juga bisa menargetkan elemen tertentu saja yang menggunakan css. Contoh hanya class
saja yang akan berwarna merah dan rata tengah
Grouping Selector
Grouping Selector yakni memilih semua elemen HTML dengan style css yang sama. Untuk Group Selector, pisahkan setiap selector dengan tanda koma.
Lihatlah kode CSS berikut (elemen h1, h2, dan p memiliki style css yang sama)
Sumber : w3school
