Cara menggunakan rule selector css

Kita buka kembali source code kita dari pelajaran sebelumnya. Sebelumnya kita telah membuat dua buah list, yaitu Daftar Buah dan Daftar Binatang Peliharaan. Lalu kita telah belajar mengenai cara menulis kode CSS eksternal untuk memberikan warna hijau pada seluruh isi list.

Kita buka dahulu kode css eksternal kita dan kita hapus seluruh isinya. Kita refresh browser dan kita lihat warna seluruh isi list sudah kembali menjadi hitam.

Sekarang kita akan belajar mengenai cara memberikan warna pada daftar buah, namun kita dapat menunjuk secara spesifik buah apa menggunakan warna apa. Sebagai contoh saya ingin membuat buah Apel berwarna merah.

Caranya bagaimana? Pertama kita menambahkan attribute ID terlebih dahulu pada elemen li yang mengandung konten apel. Kita buka kembali kode HTML kita, dan kita cari elemen li-nya. Kita tambahkan attribute ID=”apel”.

ID ini adalah attribute yang sifatnya general, sehingga bisa kita gunakan di elemen apa saja. Dan nantinya isi dari attribute ID ini akan dapat kita gunakan di seluruh kode front-end untuk merujuk ke tag tersebut. Contohnya disini kita hendak menggunakan kode CSS untuk merujuk ke tag li apel. Kita buka kode css kita. Kita akan menggunakan selector yang merujuk ke ID, oleh karena itu kita tuliskan dahulu simbol hash, setelah itu kita tuliskan apel. Simbol hash apel artinya kita hendak merubah properti dari tag yang menggunakan ID apel. Setelah itu kita ikuti sintak CSS yang telah kita pelajari sebelumnya, kita tambahkan kurung kurawal pembuka, lalu kita tuliskan color titik dua red, titik koma. Dan terakhir kita tutup kurung kurawalnya.

Kita simpan kode css kita dan kita refresh browser. Disini kita bisa melihat bahwa tulisan Apel sudah berubah menjadi berwarna merah.

Apabila kita buka kembali kode HTML kita. Kita bisa memindahkan attribute ID ini ke tempat lain untuk mengubah warnanya menjadi merah. Sebagai contoh saya pindahkan ID apel ke Jeruk. Dan kita refresh browser, sekarang Jeruk yang berubah menjadi berwarna merah.

Dan yang menariknya disini, saya bisa memindahkannya ke tag OL Daftar Buah, dan kita bisa melihat disini bahwa seluruh daftar buah berubah menjadi berwarna merah. Mengapa? Kita lihat kembali kode HTML kita, hal ini disebabkan karena seluruh tag li berada di dalam tag ol. Jadi apabila kita mengubah properti dari tag ol, maka secara otomatis seluruh tag li akan turut berubah.

Kita kembalikan id Apel ke konten Apel. Dan sebagai latihan dalam tutorial ini, silahkan mencoba untuk mengubah warna jeruk menjadi hijau, dan warna lemon menjadi kuning, dengan menggunakan selector ID yang telah kita pelajari. Pause terlebih dahulu video ini, dan coba kerjakan latihan ini pada komputer masing-masing.

Oke, sekarang kita akan mengubah warna jeruk menjadi hijau dan warna lemon menjadi kuning. Pertama kita buka dahulu file HTML dan menambahkan attribute ID=”jeruk” pada tag LI jeruk. Dan kemudian kita tambahkan juga attribute ID=”lemon” pada tag LI lemon.

Kemudian kita buka buka file CSS. Dan kita copy kode selector #apel. Lalu kita paste sebanyak 2 kali. Pertama kita ubah dahulu ID-nya menjadi #jeruk, dan kita ubah warnanya menjadi green. Dan kemudian kita ubah lagi ID yang kedua menjadi #lemon dan warnanya menjadi yellow.

Kita simpan dan refresh browser. Sekarang warna apel, jeruk dan lemon sudah berubah menjadi warna merah, hijau dan kuning.

Ada beberapa sifat dari ID yang perlu kita ketahui. Yang pertama adalah, penulisan ID bersifat case sensitif. Artinya kita harus menuliskan huruf besar dan huruf kecilnya sama persis agar tidak terjadi error. Kita lihat pada kode css kita, misalkan disini hash apel, tulisan apel adalah huruf kecil semuanya. Maka pada kode html, kita harus menuliskan ID apel dengan menggunakan huruf kecil semuanya. Apakah yang akan terjadi apabila kita menuliskan Apel dengan huruf A besar? Kita coba ubah kode html-nya. Kita simpan dan lihat hasilnya pada browser.

Sekarang warna apel kembali ke warna dasar yaitu hitam. Mengapa? Karena ID apel kita tuliskan dengan huruf A besar, dan tidak bisa connect ke kode CSS yang menggunakan hash apel dengan huruf kecil semua. Jadinya kode css kita tidak bisa mengubah warna apel menjadi merah.

Kita ubah kembali ID apel menjadi huruf kecil semua.

Sifat kedua dari ID yang perlu kita ketahui adalah, ID yang sama hanya boleh digunakan satu kali dalam halaman HTML yang sama. Jadi apabila kita sudah menambahkan attribute ID=apel di salah satu tag, maka kita sudah tidak boleh menambahkan ID=apel di tag lain dalam halaman yang sama. Namun kita boleh menambahkan ID dengan nilai lain asalkan masing-masing nilainya bersifat unik, misalkan pada daftar binatang peliharaan kita menambahkan ID=anjing, ID=kucing, dan ID=ikan.

Penulisan kode seperti ini akan cocok apabila kita ingin agar masing-masing baris pada daftar binatang peliharaan memiliki warna yang berbeda seperti daftar buah. Namun apabila kita ingin ketiga baris menggunakan warna yang sama, maka kita lebih cocok menggunakan selector class.

Selanjutnya kita akan mempelajari mengenai cara menggunakan selector class. Caranya mirip dengan cara kita menggunakan selector ID, hanya saja disini kita menggunakan attribute class. Dan attribute class ini boleh digunakan secara berulang-ulang di tag lain.

Sebagai contoh, kita buka kode HTML kita dan kita pilih tag li Anjing. Kita tambahkan attribute class=”binatang”. Kita copy attribute baru kita, dan kita paste juga pada tag li Kucing dan Ikan.

Kita simpan dan kemudian kita pindah ke kode CSS. Untuk menggunakan selector class, kita menggunakan simbol titik di depan nama class-nya. Jadi kita tambahkan kode .binatang, dan kemudian seperti biasanya diikuti dengan kurung kurawal pembuka, kemudian kita tuliskan properti yang hendak kita ubah. Misalkan color titik dua blue dan ditutup dengan titik koma. Kemudian kita tutup kembali kurung kurawalnya.

Kita simpan dan lihat hasilnya pada browser. Sekarang ketiga daftar binatang peliharaan sudah berubah menjadi berwarna biru.

Cara menggunakan selector ID dan class hampir sama ya. Perbedaannya pada kode HTML kita menggunakan attribute ID atau attribute Class. Sedangkan pada kode CSS kita menggunakan simbol hash untuk ID, dan simbol titik untuk Class. Nilai class juga bersifat case-sensitif, artinya kita harus menggunakan huruf besar atau kecil yang sama persis baik di kode HTML maupun kode CSS.

Jadi misalkan nama class pada kode CSS saya ubah menjadi huruf besar, maka browser akan gagal untuk mengubah warna daftar binatang peliharaan menjadi biru.

Perbedaan utama dari ID dan Class adalah kode CSS yang kita tuliskan menggunakan Class dapat digunakan secara berulang-ulang pada halaman yang sama. Sehingga kita hanya perlu menuliskan sedikit kode css, dan tampilan dari situs kita menjadi konsisten menggunakan gaya yang sama. Oleh karena itu, dalam prakteknya, selector class lebih sering digunakan daripada selector ID.

Perbedaan kedua adalah kita bisa menggunakan lebih dari satu class pada tag yang sama. Sebagai contoh, saya tambahkan kode css baru dengan nama kelas misalkan .warnamerah. Kemudian saya tambahkan propertinya background-color dengan nilai red.

Saya simpan dan pindah ke kode html. Untuk menggunakan kelas baru, saya tinggal menambahkan nilai pada attribute class. Misalkan kita ubah tag li dari Anjing. Pada nilai attribute class, kita tambahkan spasi, dan diikuti dengan nama class baru kita warnamerah.

Saya simpan dan refresh browser. Sekarang kita bisa melihat bahwa kita berhasil mengubah 2 gaya dari konten anjing. Dari class binatang kita mengubah warna tulisannya menjadi biru. Sedangkan dari kelas warnamerah, kita mengubah warna latar belakangnya menjadi merah. Jadi kita telah menggunakan 2 class pada tag yang sama.

Bagaimana cara Anda melakukan grouping selector pada CSS?

Apa itu selector CSS dan bagaimana cara kerjanya?

Apa itu CSS selector dan contohnya?

Selector apa saja yang bisa digunakan dalam CSS?