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 Types1. 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;
}
<p>ini adalah paragraf yang diberi style</p>
body {
background-color: red;
}
Tips | Sebuah selector harus diletakkan diantara tag </title> dan </head>
Seperti namanya, selector ini menggunakan atribut class pada HTML, beberapa elemen akan berubah style-nya sesuai nama class yang ditentukan.
.biru {
color: blue;
}
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>
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 :
* {
color: #fff;
}
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;
}
<div class="paragraf">
<p>ini adalah sebuah paragraf menggunakan descendant selector</p>
<p>ini juga :v</p>
</div>
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;
}
h1, h2, p {
text-align: center;
color: red;
}
Itulah sedikit info mengenai penggunaan css selector. Fungsi ini sangatlah penting untuk membangun sebuah web dengan style sesuai keinginan anda.
HAPPY STYLING!
weee :v
BalasHapus