Saat mulai belajar CSS, kamu akan sering menemukan kode seperti h1, .menu, #header, atau button. Kode-kode tersebut bukan sekadar tulisan biasa. Mereka disebut selector CSS, yaitu bagian penting yang digunakan untuk menentukan elemen HTML mana yang ingin diberi gaya.

Memahami selector CSS adalah salah satu langkah dasar yang wajib dikuasai sebelum mempelajari CSS lebih lanjut. Dengan selector yang tepat, kamu bisa mengatur warna, ukuran, posisi, font, hingga tampilan berbagai elemen pada halaman website dengan lebih mudah.

Lalu, apa itu selector CSS dan bagaimana cara menggunakannya? Mari pelajari dari dasar dengan contoh yang sederhana.

Apa Itu Selector CSS?

Selector CSS adalah pola yang digunakan untuk memilih elemen HTML yang ingin diberikan aturan CSS.

Misalnya, kita memiliki kode HTML berikut:

<h1>Belajar CSS</h1>
<p>CSS membuat website menjadi lebih menarik.</p>

Kemudian kita ingin mengubah warna heading menjadi biru.

Kita dapat menggunakan selector h1:

h1 {
    color: blue;
}

Pada contoh tersebut, h1 merupakan selector, sedangkan color adalah property dan blue adalah value.

Secara sederhana, cara membacanya adalah:

“Pilih semua elemen h1, kemudian ubah warnanya menjadi biru.”

Inilah fungsi utama selector CSS.

Mengapa Selector CSS Penting?

Selector menjadi bagian penting dalam CSS karena browser perlu mengetahui elemen mana yang harus diberikan style.

Tanpa selector, CSS tidak dapat menentukan target aturan yang dibuat.

Misalnya:

color: blue;

Kode tersebut belum cukup karena browser belum mengetahui elemen mana yang harus diberi warna biru.

Dengan selector:

p {
    color: blue;
}

browser mengetahui bahwa aturan tersebut ditujukan kepada elemen paragraf.

Dengan memahami selector, kamu juga akan lebih mudah membuat kode CSS yang:

• Terstruktur
• Mudah dibaca
• Mudah diperbaiki
• Dapat digunakan kembali
• Lebih efisien

Struktur Dasar Selector CSS

Struktur dasar CSS dapat ditulis seperti berikut:

selector {
    property: value;
}

Contohnya:

h1 {
    color: green;
    font-size: 32px;
}

Penjelasannya:

• h1 → selector
• color → property
• green → value
• font-size → property
• 32px → value

Selector menentukan target, sedangkan property dan value menentukan tampilan target tersebut.

Jenis-Jenis Selector CSS

CSS memiliki berbagai jenis selector. Untuk pemula, beberapa selector berikut merupakan jenis yang paling penting untuk dipahami.

1. Element Selector

Element selector digunakan untuk memilih elemen HTML berdasarkan nama tag.

Contohnya:

p {
    color: black;
}

CSS tersebut akan memberikan warna hitam kepada semua elemen <p>.

Contoh lainnya:

h1 {
    color: blue;
}

button {
    background-color: green;
}

Selector h1 memilih semua heading <h1>, sedangkan button memilih semua elemen <button>.

Element selector cocok digunakan ketika kamu ingin memberikan style yang sama kepada seluruh elemen dengan jenis tertentu.

2. Class Selector

Class selector digunakan untuk memilih elemen berdasarkan atribut class.

Misalnya HTML:

<p class="judul">Belajar CSS</p>
<p class="judul">Mengenal Selector</p>

CSS-nya:

.judul {
    color: blue;
}

Perhatikan tanda titik (.) sebelum judul.

Tanda titik menunjukkan bahwa judul merupakan class selector.

Class sangat sering digunakan dalam pengembangan website karena satu class dapat digunakan pada banyak elemen.

Contohnya:

<h2 class="warna-biru">Judul Artikel</h2>
<p class="warna-biru">Isi artikel.</p>

Kemudian:

.warna-biru {
    color: blue;
}

Kedua elemen tersebut akan mendapatkan warna biru.

3. ID Selector

ID selector digunakan untuk memilih elemen berdasarkan atribut id.

Contoh HTML:

<div id="header">
    Website Saya
</div>

CSS:

#header {
    background-color: blue;
    color: white;
}

Tanda pagar (#) digunakan untuk menunjukkan ID selector.

ID biasanya digunakan untuk elemen yang memiliki identitas khusus pada sebuah halaman.

Contohnya:

#menu {
    background-color: black;
}

Meskipun ID dapat digunakan sebagai selector CSS, untuk styling yang dapat digunakan berulang kali, class biasanya lebih fleksibel.

4. Universal Selector

Universal selector digunakan untuk memilih semua elemen HTML.

Selector ini menggunakan tanda bintang (*).

* {
    margin: 0;
    padding: 0;
}

Kode tersebut memberikan aturan margin dan padding kepada seluruh elemen.

Universal selector sering digunakan untuk melakukan reset sederhana pada halaman website.

Namun, penggunaannya perlu diperhatikan agar tidak memberikan aturan yang tidak diperlukan kepada terlalu banyak elemen.

5. Grouping Selector

Grouping selector digunakan ketika beberapa elemen ingin diberikan style yang sama.

Misalnya:

h1, h2, h3 {
    color: blue;
}

Kode tersebut memberikan warna biru kepada elemen h1, h2, dan h3.

Tanpa grouping selector, kamu mungkin akan menulis:

h1 {
    color: blue;
}

h2 {
    color: blue;
}

h3 {
    color: blue;
}

Grouping selector membuat kode menjadi lebih ringkas dan mudah dikelola.

6. Descendant Selector

Descendant selector digunakan untuk memilih elemen yang berada di dalam elemen lainnya.

Contohnya:

<div class="artikel">
    <p>Belajar CSS itu menyenangkan.</p>
</div>

CSS:

.artikel p {
    color: blue;
}

Selector .artikel p berarti memilih elemen <p> yang berada di dalam elemen dengan class artikel.

Cara ini sangat berguna ketika kamu hanya ingin mengubah elemen tertentu di dalam sebuah bagian halaman.

7. Child Selector

Child selector menggunakan tanda > untuk memilih elemen yang merupakan anak langsung dari elemen tertentu.

Contohnya:

.menu > li {
    color: blue;
}

Selector tersebut memilih <li> yang menjadi anak langsung dari elemen dengan class menu.

Perbedaan ini penting karena descendant selector dapat memilih elemen yang berada lebih dalam, sedangkan child selector hanya memilih anak langsung.

8. Attribute Selector

Attribute selector digunakan untuk memilih elemen berdasarkan atribut tertentu.

Contohnya:

input[type="text"] {
    border: 1px solid blue;
}

CSS tersebut memilih elemen <input> yang memiliki type="text".

Contoh HTML:

<input type="text">
<input type="password">

Hanya input dengan type="text" yang akan mendapatkan aturan tersebut.

Selector atribut cukup berguna ketika membuat form atau komponen website yang memiliki berbagai jenis elemen.

Mengenal Selector dengan Pseudo-Class

Selain selector dasar, CSS juga memiliki pseudo-class yang memungkinkan kita memberikan style berdasarkan kondisi tertentu.

Contoh yang paling sering digunakan adalah :hover.

button:hover {
    background-color: blue;
    color: white;
}

Ketika kursor diarahkan ke tombol, tampilan tombol akan berubah.

Contoh HTML:

<button>Klik Saya</button>

Pseudo-class lainnya yang sering digunakan antara lain:

• :hover → ketika pointer berada di atas elemen
• :focus → ketika elemen sedang mendapatkan fokus
• :first-child → memilih anak pertama
• :last-child → memilih anak terakhir
• :nth-child() → memilih elemen berdasarkan urutan

Pseudo-class membuat website terasa lebih interaktif tanpa harus menggunakan JavaScript untuk efek sederhana.

Selector CSS untuk Membuat Tombol

Sekarang mari kita coba membuat contoh sederhana menggunakan class selector dan pseudo-class.

HTML:

<button class="tombol">Mulai Belajar</button>

CSS:

.tombol {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
}

.tombol:hover {
    background-color: darkblue;
}

Hasilnya, tombol memiliki warna biru. Ketika pointer diarahkan ke tombol, warnanya berubah menjadi biru lebih gelap.

Dari contoh sederhana ini, kamu sudah menggunakan dua konsep selector:

• .tombol → class selector
• .tombol:hover → class selector dengan pseudo-class

Perbedaan Class dan ID Selector

Class dan ID merupakan dua selector yang sering membuat pemula bingung.

Perhatikan contoh berikut.

Class

HTML:

<p class="teks">Paragraf pertama</p>
<p class="teks">Paragraf kedua</p>

CSS:

.teks {
    color: blue;
}

Class dapat digunakan pada beberapa elemen.

ID

HTML:

<p id="utama">Paragraf utama</p>

CSS:

#utama {
    color: red;
}

ID digunakan untuk mengidentifikasi elemen tertentu.

Secara praktik, class biasanya menjadi pilihan utama untuk styling yang dapat digunakan berulang kali, sedangkan ID lebih cocok ketika sebuah elemen memang memiliki identitas unik.

Kesalahan Umum Saat Menggunakan Selector CSS

Pemula sering melakukan beberapa kesalahan ketika menulis selector CSS. Berikut beberapa di antaranya.

1. Lupa Menulis Titik pada Class

Salah:

judul {
    color: blue;
}

Jika judul adalah class, seharusnya:

.judul {
    color: blue;
}

2. Lupa Menggunakan Tanda

Untuk ID selector:

#header {
    background-color: blue;
}

Bukan:

header {
    background-color: blue;
}

Jika header merupakan ID, tanda # harus digunakan.

3. Salah Menulis Nama Class

HTML:

<p class="judul-artikel">Belajar CSS</p>

CSS:

.judul {
    color: blue;
}

CSS tersebut tidak akan memilih class judul-artikel.

Nama class harus sesuai:

.judul-artikel {
    color: blue;
}

4. Menggunakan Selector Terlalu Spesifik

Selector yang terlalu panjang dapat membuat CSS sulit dikelola.

Contohnya:

body .container .artikel .content p.teks {
    color: blue;
}

Jika tidak diperlukan, lebih baik menggunakan selector yang lebih sederhana seperti:

.teks {
    color: blue;
}

Kode yang sederhana biasanya lebih mudah dipahami dan dirawat.

Tips Belajar Selector CSS untuk Pemula

Agar lebih cepat memahami selector CSS, jangan hanya menghafal jenis-jenisnya. Cobalah langsung membuat halaman HTML sederhana dan bereksperimen dengan berbagai selector.

Urutan belajar yang bisa kamu coba:

1. Pelajari element selector.
2. Lanjutkan dengan class selector.
3. Pahami ID selector.
4. Coba universal dan grouping selector.
5. Pelajari descendant dan child selector.
6. Kenali attribute selector.
7. Lanjutkan ke pseudo-class seperti :hover.
8. Praktikkan semuanya dalam project kecil.

Misalnya, buat halaman profil sederhana yang memiliki heading, paragraf, tombol, menu, dan kartu informasi. Setelah itu, coba berikan style menggunakan selector yang berbeda.

Dengan cara ini, kamu tidak hanya menghafal teori, tetapi juga memahami kapan sebuah selector harus digunakan.

Kesimpulan

Selector CSS adalah bagian penting dalam CSS yang digunakan untuk memilih elemen HTML yang ingin diberikan style. Dengan selector, kita dapat mengatur tampilan website secara lebih terarah dan terorganisir.

Beberapa selector dasar yang wajib dipahami pemula antara lain element selector, class selector, ID selector, universal selector, grouping selector, descendant selector, child selector, dan attribute selector.

Setelah memahami selector dasar, kamu dapat melanjutkan ke materi yang lebih menarik seperti pseudo-class, pseudo-element, specificity, Flexbox, dan CSS Grid.

Belajar CSS tidak harus langsung menguasai semuanya. Mulailah dari selector sederhana, praktikkan dengan project kecil, lalu tingkatkan kemampuan secara bertahap. Semakin sering mencoba, semakin mudah kamu memahami cara CSS mengatur tampilan sebuah website.