Pembelajaran CSS Selector bagian 2
Photo by Safar Safarov on Unsplash
Setelah kita memahami dasar-dasar CSS pada bab sebelumnya, ternyata CSS Selector tidak hanya dibatasi oleh tag, id dan class saja. kita pun sudah membahas hal itu pada CSS Selector Lanjutan bagian 1. Untuk melengkapi pemahaman kita mengenai CSS Selector, kita lanjut Pembelajaran CSS Selector bagian 2 dan perhatikan tabel penjelasan dibawah ini :
| Selector | Contoh | Deskripsi Contoh | Versi CSS |
|---|---|---|---|
| .[attribute] | [target] | Menyeleksi elemen yang memiliki attribute “target” | 2 |
| [attribute=value] | [target=_blank] | Menyeleksi elemen yang memiliki attribut target=”_blank” | 2 |
| [attribute~=value] | [title~=css] | Menyeleksi elemen yang memiliki attribut title yang mengandung kata “css” | 2 |
| [attribute|=value] | [lang|=en] | Menyeleksi elemen yang memiliki attribut lang yang memiliki value dengan awalan “en”.
catatan : berlaku jika value terdiri dari satu kata atau secara keseluruhan kata utamanya terdiri dari kata tersebut dan dihubungkan dengan – |
2 |
| [attribute^=value] | a[href^=”https”] | menyeleksi elemen <a> yang value/isi dari attribut hrefnya dimulai dengan “https” | 3 |
| [attribute$=value] | a[href$=”.pdf”] | menyeleksi elemen <a> yang value/isi dari attribut hrefnya diakhiri dengan “.pdf” | 3 |
| [attribute*=value] | a[href*=”css”] | menyeleksi elemen <a> yang value/isi dari attribut hrefnya mengandung huruf “css” | 3 |
Perhatikan contoh dibawah ini :
Pada contoh diatas, kita lihat bahwa semua elemen terbuat dari tag <a>, namun yang memiliki attribut target adalah link 1, link 3 dan link 5. jadi, kita bisa atur langsung dengan menggunakan attribut selector [target].
Jika, kita ingin lebih spesifik khusus untuk attribute dengan value tertentu, maka kita bisa menyeleksinya dengan cara [attribute=value] (lihat kembali contoh diatas, kita sudah implementasikan pada link 3 khusus untuk [target=”_self”]
Contoh Attribute lanjutan:
Silakan amati dan cermati contoh diatas, apabila ada yang kurang paham silakan kirim pertanyaan di kolom komentar. untuk case-case lainnya pada table diatas silakan di coba sendiri yah teman-teman.
Keep Learning and Good Luck ^_^, Semangat
Itulah artikel Pembelajaran CSS Selector bagian 2 yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.