Postingan lainnya
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.
