Bagi sobat yang familiar dengan CSS, pasti tidak asing lagi dengan CSS Selector. Selector berfungsi untuk memilih dan memanipulasi elemen atau indikator di dalam HTML, selector sendiri letaknya berada di dalam HTML. Selector sangat berguna untuk memodifikasi tampilan web sobat seperti paragraf, dsb. Ada banyak sekali jenis2 selector termasuk selector class dan id yang sering kita jumpai di bahasa pemrograman lain.
Selector Types
1. Element Selector
Element Selector berfungsi memilih elemen sesuai nama tag elemen tersebut, Selector ini digunakan untuk mengubah style dasar yang terdapat di seluruh HTML. Contohnya kita dapat mengubah style paragraf kek gini :
p {
font-size: 13px;
color: #fff;
}
Cara memanggilnya tentu dengan langsung menggunakan tag elemen tersebut.
<p>ini adalah paragraf yang diberi style</p>
Contoh lain yang sering digunakan adalah selector elemen body :
body {
background-color: red;
}
Kode diatas akan mengubah background body web menjadi merah
Tips | Sebuah selector harus diletakkan diantara tag </title> dan </head>
2. Class Selector
Seperti namanya, selector ini menggunakan atribut class pada HTML, beberapa elemen akan berubah style-nya sesuai nama class yang ditentukan.
Kode di atas akan mengubah seluruh teks yang menggunakan class "biru" menjadi berwarna biru. Untuk memasang class selector, kalian perlu menambahkan titik (.) di depan nama class tersebut. Dan untuk memanggilnya perlu menggunakan atribut class seperti ini :
<p class="biru">ini teks warna biru</p>
3. Id Selector
Sebenarnya id selector memiliki fungsi yang sama dengan class selector, namun biasanya digunakan untuk memberi style pada elemen tertentu yang lebih spesifik. Nama id harus unik karena hanya digunakan oleh satu elemen.
#unik {
text-align: center;
color: green;
}
Sebelum nama id harus diberi hashtag (#), inilah yang membedakan id dengan class. Cara memanggilnya pun sama, tetapi menggunakan atribut id tentunya.
<p id="unik">teks ini menggunakan id unik :v</p>
Tips | Jangan lupa masukkan selector ke dalam elemen <style>
4. Universal Selector
Selector yang satu ini akan diterapkan di seluruh elemen HTML karena bersifat universal, contoh penggunaannya :
Yap! Universal selector menggunakan tanda bintang (*) sebagai indikatornya, kode diatas akan mengubah seluruh teks pada HTML menjadi berwarna putih
5. Descendant Selector
Di dalam sebuah web pasti terdapat banyak sekali konten atau artikel yang memiliki banyak paragraf, sedangkan yang kita inginkan adalah mengubah style seluruh paragraf tersebut. Untuk mengubahnya kalian dapat memberi atribut class pada masing-masing tag paragraf, namun alangkah mudahnya jika menggunakan descendant selector.
Pertama, Buatlah sebuah class dengan diikuti nama tag elemen :
.paragraf p{
color: yellow;
}
Kemudian beri tag div dan atribut class pada beberapa paragraf yang dipilih :
<div class="paragraf">
<p>ini adalah sebuah paragraf menggunakan descendant selector</p>
<p>ini juga :v</p>
</div>
Maka teks paragraf di dalam tag div akan berubah sesuai style class.
Grouping Selector
Terkadang kita menjumpai beberapa selector dengan style yang sama seperti berikut
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Ketiga selector tersebut memiliki style yang sama, kalian dapat menyatukan style tersebut dengan membuat grup selector. Caranya sangatlah mudah, yaitu dengan menyatukan nama elemen dan memisahnya dengan tanda koma seperti di bawah ini :
h1, h2, p {
text-align: center;
color: red;
}
Dengan adanya group selector, kita tidak perlu ribet membuat kopian kode yang sama. Selain itu, cara ini juga mengurangi ukuran file html dan tentu mempercepat loading web anda
walaupun hanya sedikit :v
Itulah sedikit info mengenai penggunaan css selector. Fungsi ini sangatlah penting untuk membangun sebuah web dengan style sesuai keinginan anda.
HAPPY STYLING!
