Pada video ini kita akan mempelajari mengenai cara menggunakan Attribute Selector. Sebagai contoh pemakaian, misalkan saya memiliki kode HTML dengan tiga buah input, dengan tipe text, password dan email. Misalkan saya ingin memilih input dengan tipe text untuk memberikan warna latar belakang pink.

Maka di dalam kode css, saya bisa menuliskannya dengan cara pertama saya tuliskan dahulu nama elemennya, yaitu input. Kemudian diikuti dengan kurung siku. Dan di dalam kurung saya tuliskan nama dan nilai attribute yang saya pilih, yaitu type=”text”.

Hasilnya dapat dilihat di bagian kanan bawah. Browser menampilkan 3 buah input dengan label nama, password dan email. Input dengan label nama akan menggunakan warna latar belakang pink, karena tipenya adalah text. Sedangkan input lainnya akan menggunakan warna latar belakang default, yaitu putih.

Kita buka kembali source code dari pelajaran sebelumnya. Pada bagian paling bawah, saya telah menambahkan formulir pendafaran, dengan empat buah input untuk nama, password, email dan tombol Daftar. Dan kalau kita lihat pada kode HTML-nya, keempat input menggunakan attribute type yang berbeda-beda, yaitu text untuk nama, password untuk password, email untuk email dan button untuk tombol daftar.

Tag input ini memang paling cocok untuk digunakan sebagai contoh attribute selector, karena tag pasti menggunakan attribute type, dimana nilai dari attribute type ini sangat menentukan bagaimana behavior dari tag tersebut.

Nah, sebagai contoh disini, misalkan saya hendak memilih input dengan type=”password”, untuk memberikan warna latar belakang pink. Pertama kita buka kembali kode CSS kita. Lalu kita tambahkan, misalkan nama elemen input, lalu kurung kurawal. Kita beri properti background-color: pink.

Kita simpan dan refresh browser. Bisa dilihat pada browser bahwa semua input akan menggunakan warna latar belakang pink. Termasuk tombol Daftar.

Padahal kita hanya ingin memilih input yang tipenya password saja ya. Untuk memperbaikinya, kita bisa menambahkan kurung siku setelah input. Lalu kita ketikkan attribute type=”password”.

Kita simpan dan refresh browser. Sekarang seletornya sudah benar ya. Karena kita hanya memilih input yang jenisnya password saja untuk menggunakan warna latar belakang pink. Sedangkan input lainnya tetap berwarna putih.

Nah, satu hal yang menarik dari attribute selector ini adalah kita bisa menggunakannya untuk memilih attribute apa pun dari sebuah tag, termasuk attribute ID dan Class. Jadi kalau kita lihat di kode HTML, disini kita bisa menemukan ada section dengan attribute class=”judul_utama”. Kita bisa memilih section ini dengan menuliskan section[class=”judul_utama”]. Misalkan kita berikan background-color: pink.

Kita simpan dan refresh browser. Sekarang seluruh isi dari section judul_utama sudah menggunakan warna latar belakang pink.

Attribute selector seperti ini akan berguna apabila kelas judul_utama digunakan di banyak elemen. Misalnya selain digunakan pada section, digunakan juga pada div dan p. Jadi apabila kita ingin memilih hanya class judul_utama yang digunakan pada section saja, maka kita bisa menggunakan attribute selector seperti ini, sehingga properti yang kita atur tidak mempengaruhi tag div dan p.

Tapi ini hanya contoh penggunaan saja ya. Kenyataannya penggunaan seperti ini sangat jarang terjadi. Karena kita bisa dengan mudah menggunakan nama class lain untuk masing-masing elemen. Jadi disini saya hanya memberikan contoh saja, bahwa kita bisa menggunakan attribute selector untuk memilih class.

Sebagai alternatif, untuk menyebutkan class=”judul_utama”, kita bisa menggantinya dengan lebih sederhana yaitu menjadi .judul_utama saja. Jadi selector pada kode CSS ini bisa kita ganti menjadi selector.judul_utama, dan hasilnya akan tetap sama. Dan praktek yang lebih umum digunakan adalah langsung .judul_utama saja.

Contoh lain yang menarik untuk penggunaan attribute selector bisa kita lihat pada MDN. Pertama kita buka tab baru pada browser. Kita search dengan kata kunci attribute selector MDN. Lalu kita buka halaman referensi dari MDN.

Disini kita bisa melihat contoh penggunaan attribute selector pada anchor tag. Dan ternyata kita bisa memilih nilainya bukan hanya dari tanda sama dengan saja ya. Disini ada contoh lainnya yaitu tanda bintang sama dengan. Artinya kita bisa memilih attribute yang nilainya mengandung kata tertentu.

Sebagai contoh, kita lihat kembali ke kode HTML. Pada paragraf pertama disini kita memiliki 2 buah anchor tag dengan href=”#”. Misalkan salah satu href saya ganti menjadi http://www.google.com.

Dan kemudian kita bisa memilih anchor tag tersebut dengan menuliskan a[href*=”google”]. Misalkan saya beri background-color:lightyellow;.

Kita simpan dan refresh hasilnya. Dan bisa kita lihat bahwa dengan menggunakan selector seperti ini, artinya seluruh link kita yang menuju ke Google, akan menggunakan warna latar belakang kuning muda.

Dan yang perlu diperhatikan lagi disini adalah bahwa nilai yang kita tulis pada CSS sifatnya adalah case-sensitif. Artinya kalau misalkan link pada HTML saya ubah menjadi Google dengan huruf G besar, maka link tersebut sudah tidak terpilih.

Untuk contoh penggunaan Attribute Selector lebih lanjut, teman-teman bisa melihat referensi dari MDN.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.