Mengenal CSS Selector (Cara Mengatur Tampilan Website dengan Tepat)

Halo, Teman-Teman!

Pada artikel kali ini, kita akan membahas CSS Selector, yaitu cara untuk memilih elemen HTML mana yang ingin kita atur tampilannya menggunakan CSS. Dengan memahami CSS Selector, kamu bisa mengatur warna, ukuran, atau tata letak elemen di website dengan lebih mudah.

Apa Itu CSS Selector?

CSS Selector adalah bagian dari CSS yang digunakan untuk "menargetkan" elemen HTML tertentu agar gaya (style) bisa diterapkan pada elemen tersebut. Selector bekerja dengan cara membaca HTML dan memilih elemen yang sesuai, kemudian menerapkan aturan CSS yang kamu tulis.

Berikut ini adalah beberapa jenis CSS Selector yang sering digunakan:

1. Element Selector

Element Selector digunakan untuk menargetkan semua elemen dengan nama tag tertentu.

Contoh:

<h1>Judul</h1>
<h2>Subjudul</h2>

h1 {
    color: blue;
}

Hasilnya, semua elemen <h1> di halaman akan berubah menjadi biru.

2. Class Selector

Class Selector digunakan untuk menargetkan elemen-elemen dengan atribut class tertentu. Class dapat digunakan pada banyak elemen sekaligus.

Contoh:

<h1 class="judul-biru">Judul</h1>
<p class="judul-biru">Paragraf</p>

.judul-biru {
    color: blue;
}

Hasilnya, elemen <h1> dan <p> yang memiliki class="judul-biru" akan berubah menjadi biru.

3. ID Selector

ID Selector digunakan untuk menargetkan elemen dengan atribut id. ID bersifat unik, hanya boleh digunakan pada satu elemen per halaman.

Contoh:

<h1 id="judul-utama">Judul</h1>

#judul-utama {
    color: red;
}

Hasilnya, elemen <h1> dengan id="judul-utama" akan berubah menjadi merah.

4. Attribute Selector

Attribute Selector digunakan untuk menargetkan elemen berdasarkan atribut tertentu, seperti draggable atau href.

Contoh:

<p draggable="true">Bisa diseret</p>
<p draggable="false">Tidak bisa diseret</p>

p[draggable="true"] {
    color: green;
}

Hasilnya, hanya paragraf dengan draggable="true" yang berubah menjadi hijau.

5. Universal Selector

Universal Selector digunakan untuk menargetkan semua elemen dalam halaman HTML.

Contoh:

<h1>Judul</h1>
<p>Paragraf</p>

* {
    text-align: center;
}

Hasilnya, semua elemen akan diratakan ke tengah.

Latihan: Gunakan CSS Selector

1. Buat file HTML sederhana dengan beberapa elemen seperti <h1>, <p>, atau <div>.
2. Tambahkan class, id, atau atribut lainnya pada elemen-elemen tersebut.
3. Tulis aturan CSS untuk masing-masing selector di file CSS terpisah.
4. Lihat bagaimana selector bekerja untuk menargetkan elemen tertentu.

Kesimpulan

CSS Selector adalah alat penting untuk mengatur tampilan elemen HTML. Dengan memahami cara kerja element, class, ID, attribute, dan universal selector, kamu bisa mengatur desain website dengan lebih efisien dan terstruktur.

Di artikel berikutnya, kita akan membahas CSS Specificity, yaitu cara menentukan prioritas jika ada beberapa aturan CSS yang saling bertabrakan. Selamat mencoba, dan sampai jumpa! 

Baca juga