CSS Selector Lanjutan Bagian 1

Photo by Pankaj 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

SelectorContohDeskripsi ContohVersi CSS
.class.introMenyeleksi semua elemen yang memiliki class=”intro”1
#id#firstnameMenyeleksi elemen yang memiliki id=”firstname”1
**Menyeleksi Semua Elemen2
element/tagpMenyeleksi semua elemen p(paragraf)1
element,element (pisahkan dengan koma)div, pMenyeleksi semua elemen div dan p1
element elementdiv pMenyelesi semua elemen <p> yang ada didalam elemen <div>1
element>elementdiv > pMenyeleksi 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 lain2
element+elementdiv + pMenyeleksi elemen <p> yang ditempatkan langsung setelah elemen <div>2
element1~element2p ~ ulMenyeleksi 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 ^_^