CSS Selector Lanjutan Bagian 1
Photo By Pankaj PatelPankaj Patel on Unsplash
Seperti yang sudah kita pelajari sebelumnya, CSS Selector digunakan untuk menyeleksi elemen HTML yang akan kita sisipkan style.
Tabel dibawah ini saya ambil referensi dari W3schools/cssref. Jika anda punya kemampuan bahasa inggris yang cukup, saya sarankan anda merujuk ke sumber aslinya. dan untuk memahami lebih detail mengenai CSS Selector silakan anda baca artikel dibawah ini sampai selesai atau anda bisa langsung menuju ke halaman ini w3schools/trial
| Selector | Contoh | Deskripsi Contoh | Versi CSS |
|---|---|---|---|
| .class | .intro | Menyeleksi semua elemen yang memiliki class=”intro” | 1 |
| #id | #firstname | Menyeleksi elemen yang memiliki id=”firstname” | 1 |
| * | * | Menyeleksi Semua Elemen | 2 |
| element/tag | p | Menyeleksi semua elemen p(paragraf) | 1 |
| element,element (pisahkan dengan koma) | div, p | Menyeleksi semua elemen div dan p | 1 |
| element element | div p | Menyelesi semua elemen <p> yang ada didalam elemen <div> | 1 |
| element>element | div > p | Menyeleksi semua elemen <p> yang berada 1 tingkat dari elemen <div>. pada dasarnya hampir mirip dengan yang div p, namun dikhususkan untuk elemen yang berada 1 tingkat didalamnya tanpa terhalang elemen lain | 2 |
| element+element | div + p | Menyeleksi elemen <p> yang ditempatkan langsung setelah elemen <div> | 2 |
| element1~element2 | p ~ ul | Menyeleksi semua elemen <ul> yang secara hirarki sejajar dengan elemen <p> | 3 |
Untuk memahami semua contoh diatas, perhatikan contoh dibawah ini.
Demikian materi untuk hari ini, untuk materi CSS Selector selanjutnya akan kita bahas di artikel selanjutnya. Sering-sering cek blog ini yah kawan-kawan, semoga rekan-rekan makin bersemangat untuk mempelajari CSS.
Itulah artikel yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.
Keep Learning ^_^