Selector adalah kode yang ditulis di CSS untuk memberi style pada halaman HTML.
Ada dua jenis selector yang harus kamu pahami, yaitu selektor untuk id dan class HTML.
Ini berbeda dengan selector umumnya, karena selektor CSS umumnya menggunakan tag element yang sama dengan html.
Sebagai contoh, jika tag elemen <p> maka selektor CSSnya adalah p{}, jika <body> maka body{}, jika <div> maka div{}, dst.
Kalau class dan id sedikit berbeda. Karena class dan id itu atribut, dengan value yang bisa ditulis sesuka kita. Contoh <div class="aku_ganteng"> dan <div id="aku_cantik">.
Kedua div diatas ada yang diberi class dengan value aku_ganteng, ada juga id dengan value aku_cantik.
Bagaimana cara memberi style di css?
Style ID di CSS
Untuk memberi style id di CSS, kita tinggal membuat selektor dengan nama yang sama persis dengan nama id ditambah dengan simbol pagar #.
Kasus diatas adalah memiliki id aku_cantik. Maka selectornya adalah #aku_cantik.
Style Class di CSS
Memberi style class di CSS juga mudah, kita hanya perlu menambahkan titik . di selector CSS.
Misal, contoh diatas adalah class dengan nama aku_ganteng. Maka selectornya adalah .aku_ganteng.
Implementasi Class dan ID CSS
Kita akan mencoba mengimplementasi kode CSS dengan ID dan class.
Di sini saya menulis css dengan metode eksternal css.
Halaman belajar.html.
<!DOCTYPE html> <html> <head> <title>Belajar Class dan ID</title> <link rel="stylesheet" type="text/css" href="belajar_style.css"> </head> <body> <div class="aku_ganteng"><h1>Ini Class aku_ganteng</h1></div> <div id="aku_cantik"><h1>Ini ID aku_cantik</h1></div> <div class="aku_ganteng"><h1>Ini Class aku_ganteng</h1></div> </body> </html>
Kode belajar_style.css
.aku_ganteng {
width: 400px;
height: 200px;
background:red;
border: yellow solid 2px;
}
#aku_cantik {
width: 100%;
height: 100px;
background: green;
}
h1 {
color: white
}
Hasilnya:
Ingat! ID hanya bisa dipanggil sekali, kalau Class bisa berkali-kali.
Penggunaan Lanjutan Class dan ID
Kalau kamu sudah jadi programmer pro, ada kasus dimana kita memberi class atau id pada elemen html khusus.
Class khusus element
Misal, hanya memberi class pada elemen <p>. Maka selector CSSnya adalah: p.nama_class {}.
Sehingga, elemen apapun selain <p> yang punya class bernama nama_class maka tidak berefek.
Id khusus element
Sama seperti class diatas, kita bisa memberi id pada elemen khusus. Misal elemen <p>, maka selectornya: p#nama_id.
Sehingga, apapun selain elemen <p> tidak berefek jika diberi id bernama nama_id.
Itu tadi adalah penjelasan singkat tentang penggunaan css pada atribut ID dan Class. Semoga banyak membantu ya.
Very usefull, thanks