بِسْمِ اللّهِ
السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Melanjutkan pertemuan yang lalu mengenai CSS (Cascading Style Sheets), maka pada pertemuan kali ini kita akan mempelajari mengenai CSS Selector yang mempunyai fungsi untuk menandai/menemukan element HTML mana yang akan dirubah style nya.
Setidaknya CSS Selector terbagi atas beberapa kategori :
1. Selektor Sederhana (pilih elemen berdasarkan nama, id, kelas)
2. Penyeleksi Combinator (elemen pilih berdasarkan hubungan tertentu di antara mereka)
3. Selektor Pseudo-Kelas (pilih elemen berdasarkan kondisi tertentu)
4. Selektor Elemen Semu (pilih dan gaya bagian dari elemen)
5. Selektor Atribut (elemen pilih berdasarkan atribut atau nilai atribut)
Tetapi dalam pertemuan kali ini kita akan membahas selektor yang paling banyak digunakan.
1. CSS ID SELECTOR
Selector ID menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Untuk memilih elemen dengan id tertentu kalian harus menulis karakter hash (#) diikuti oleh id elemen.
Perhatikan script/kode diatas, pada element paragraf pertama <p> … </p> yang memiliki konten tulisan SMA Adi Luhur dilakukan pemanggilan script/kode style CSS dengan kode ID “para1” (Lihat baris kode pada element <head> … </head>), sehingga tulisan SMA ADI LUHUR style-nya mengikuti baris kode style CSS dengan ID “para1” (terletak di tengah-tengah layar dan berwarna merah).
*) Untuk penamaan ID tidak bisa dimulai dengan angka
2. CSS CLASS SELECTOR
Class Selector difungsikan untuk memilih element HTML tertentu dengan attribute class yang lebih spesifik. Untuk memilih element dengan Class Selector harus diawali dengan tanda titik (.) diikuti nama kelas.
Perhatikan script/baris kode diatas, terdapat dua kelas CSS yang dikhusus kan untuk element tag paragraf <p> dengan atribut tertentu. Pada tulisan “Tulisan ini tidak memiliki style CSS” tidak mendapatkan perubahan dikarenakan menggunakan tag element <h1> walupun diatributnya dituliskan untuk mendapatkan CSS Class “tengah”. Sedangkan pada tulisan-tulisan berikutnya mengalami perubahan style, ini dikarenakan tulisan-tulisan tersebut dibentuk menggunakan element paragraf <p>.
Pertemuan kali ini kita cukupkan sampai pada Class Selector untuk Selector lainnya akan kita lanjutkan pada pertemuan berikutnya. Sekian pertemuan kita pada kali ini, tetap semangat belajar, jaga kesehatan, dan kurangi / hindari segala aktifitas diluar rumah sebagai bentuk proteksi diri dalam memerangi pandemi CoViD-19.
*) Catatan
Apabila aplikasi contoh CodePen tidak tampil seperti gambar dibawah ini, silahkan buka link/tautan yang ditampilkan untuk mengaktifkan aplikasi dan silahkan kembali lagi ke halaman ini.
