Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana sih cara baca / perbedaan selektor ini?
Kalo saya menulis selektor CSS seperti ini: > .class element (pake spasi) > element .class (pake spasi) > element.class (tanpa spasi) gimana sih cara bacanya? thank you
3 Jawaban:
Jawaban Terpilih
Elemen selektor itu banyak, cuma saya akan ngejelasin beberapa.
.nama_class : memilih semua elemen yang memiliki class="nama_class" <pre> <div class="nama_class">...</div> </pre> #nama_id : memilih elemen dengan id="nama_id" (id bersifat unik tiap page html, tidak boleh ada id yang sama pada 1 html) <pre> <div id="nama_id">...</div> </pre> div : memilih semua elemen tag <div> <pre> <div class="nama_class" id="nama_id">...</div> </pre> div.nama_class : Memilih semua elemen tag <div> yang satu elemen dengan class="nama_class" <pre> <div class="nama_class"></div> </pre> .nama_class, span: Memilih semua elemen class="nama_class" dan tag <span> <pre> <div class="nama_class">...</div> <span>...</span> <div class="nama_class">...</div> <div class="nama_class">...</div> <span>...</span> </pre> div span : Memilih semua elemen tag <div> yang di dalamnya terdapat elemen tag <span> <pre> <div class="nama_class"> <div id="nama_id"> <span>...</span> </div> </div> <div class="nama_class"> <span>...</span> </div> </pre> div > span : Memilih semua elemen tag <div> yang di dalam selanjutnya adalah <span> <pre> <div class="nama_class"> <span>...</span> </div> <div id="nama_id"> <div class="nama_class"> <span>...</span> </div> </div> </pre> div + span : Memilih semua elemen tag <div> yang sama tingkat selanjutnya adalah <span> <pre> <div class="nama_class">...</div> <span>...</span> </pre> [selected="true"]: memilih semua elemen yang memiliki attribute selected="true" <pre> <option class="nama_class" selected="true"></option> </pre>
-
: memilih semua elemen
Terus harus diperhatikan juga kekuatan elemen-nya Inline CSS > elemen id > elemen class, pseudo-class(:first-child, ::before, ::after, :last-child, dll), elemen attribute > elemen tag Semakin kuat selektor maka style itulah yang digunakan Lebih jelas : https://css-tricks.com/specifics-on-css-specificity/
Contoh disini terdapat html, beberapa cara menulis selektor-nya(bisa memilih 1 dari beberapa cara yang ada pada contoh), dan perbandingan kekuatan selektor(contoh disini saya urutkan berdasarkan kekuatan selektor) :
<pre> <div id="test"> <span>Text</span> </div> </pre> <pre> div#test span { color: red; } div span { color: green; } span { color: blue; } </pre> disini terdapat kode html dan 3 buah selektor yang sama-sama ingin mengubah color pada html yang sama, warna yang akan digunakan adalah color:red pada selektor div#test span, karena dia memiliki 1 elemen id yang pada dasarnya lebih kuat dari div span atau span. Jika selektor div#test span dihapus yang akan terterap adalah color:green pada div span karena dia memiliki 2 elemen tag yang pada dasarnya lebih kuat dari span yang memiliki 1 elemen tag.
