Dalam CSS terdapat selektor yang membantu kita untuk memilih elemen yang akan di style. Tentunya, CSS telah menyediakan banyak selektor dan menyediakan cara untuk menggabungkan berbagai selektor. Untuk kamu yang belum tahu tentang selektor kamu bisa melihat tutorial sebelumnya Beljar CSS: Dasar.

Selektor Dasar

Selektor Tag

Selektor tag merupakan selektor yang memungkinkan kita memilih elemen berdasarkan nama tag. Contoh:

<style>
/* Memilih semua elemen dengan tag p*/
p {
    color: red;
}
</style>
<p>Saya akan berwarna merah<p>

Menjadi:

Selektor Class

Selektor class merupakan selektor yang memungkinkan kita memilih elemen berdasarkan nama class. Nama class ditaruh dalam atribut class. Dalam halaman HTML, kita dapat menggunakan class berulang kali. Penulisan selektor class harus didahului titik (.) sebelum nama class. Contoh:

<style>
/* memilih elemen dengan class merah */
.merah {
    color: red;
}

/* memilih elemen dengan class biru */
.biru {
    color: blue;
}
</style>
<p class="merah">Ini akan berwarna merah</p>
<p class="biru">Ini akan berwarna biru</p>

Menjadi:

Kita juga dapat menggunakan beberapa class. Nama-nama class dalam HTML harus di dipisahkan oleh spasi dan dalam CSS dipisahkan dengan titik .. Contoh:

<style>
/* memilih elemen dengan class merah dan bg-putih */
.merah.bg-putih {
    color: red;
    background-color: white;
}

/* memilih elemen dengan class merah dan bg-hitam */
.merah.bg-hitam {
    color: red;
    background-color: black;
}
</style>
<p class="merah bg-putih">Merah berlatar putih</p>
<p class="merah bg-hitam">Merah berlatar hitam</p>

Selektor ID

Selektor id merupakan selektor yang memungkinkan kita untuk memilih elemen berdasarkan nama ID. Nama ID ditaruh dalam atribut id. Dalam halaman HTML, kita hanya boleh menggunakan satu nama ID untuk satu elemen. Penulisan selektor ID harus didahului # sebelum nama ID. Contoh:

<style>
/* memilih elemen dengan ID merah */
#merah {
    color: red;
}

/* memilih elemen dengan ID biru */
#biru {
    color: blue;
}
</style>
<p id="merah">Ini akan berwarna merah</p>
<p id="biru">Ini akan berwarna biru</p>

Menjadi:

Mengkombinasikan Beberapa Selektor

Dengan mengkombinasikan selektor kita dapat memilih elemen secara lebih spesisik. Kita dapat mengkombinasikan beberapa selktor dengan menggabungkan beberapa selektor menjadi satu (tanpa spasi). Contoh:

<style>
/* memilih elemen dengan tag p yang mempunyai class merah */
p.merah {
    color: red;
}

/* memilih elemen dengan class biru id footer yang mempunyai*/
#footer.biru {
    background-color: blue;
    color: white; 
}
</style>
<p class="merah">Berwarna merah</p>
<div id="footer" class="biru">
    Berwarna putih berlatar biru
</div>

Menjadi:

Mengelompokkan Selektor

Dengan menegelompokkan selektor kita dapat menggunakan blok deklarasi untuk beberapa selektor. Jadi, kita dapat mengatur beberapa komponen sekaligus. Caranya dengan memisahkan beberapa selektor dengan koma (,). Contoh:

<style>
/* Memilih elemen dengan tag p yang mempunyai class merah atau tag p yang mempunyai class biru*/
p.merah, p.biru {
    background-color: black;
}

/* Memilih elemen dengan tag p yang mempunyai class merah  */
p.merah {
    color: red;
}

/* Memilih elemen dengan tag p yang mempunyai class biru */
p.biru {
    color: blue;
}
</style>
<p class="merah">Warna merah dalam hitam</p>
<p class="biru">Warna biru dalam hitam</p>

Menjadi:

Kesimpulan

Jika kalian masih bingung dengan selektor-selektor tadi, kalian harus memahami dan berlatih satu per satu. Saya jamin CSS Selektor itu gampang. Jangan putus asa dalam belajar.