CSS Selector Lanjutan Bagian 1

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.

Keep Learning ^_^