Memahami 6 Jenis Selektor di CSS

Selektor di CSS adalah cara untuk memilih elemen HTML tertentu agar dapat diberi gaya. Artikel ini akan menjelaskan 6 jenis selektor utama di CSS, beserta contoh penggunaannya.

1. Selektor Elemen (Element Selector)

Selektor elemen digunakan untuk memilih elemen HTML berdasarkan nama tag-nya. Misalnya, jika Anda ingin memberi gaya pada semua elemen <p>, gunakan selektor elemen:

p {
    color: blue;
    font-size: 16px;
}

Contoh:

<p>Ini adalah paragraf.</p>

2. Selektor ID (ID Selector)

Selektor ID digunakan untuk memilih elemen dengan atribut id tertentu. Selektor ini diawali dengan tanda #.

#header {
    background-color: #f4f4f4;
    padding: 10px;
}

Contoh:

<div id="header">Ini adalah header.</div>

3. Selektor Kelas (Class Selector)

Selektor kelas digunakan untuk memilih elemen dengan atribut class tertentu. Selektor ini diawali dengan tanda ..

.button {
    background-color: #008cba;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

Contoh:

<button class="button">Klik Saya</button>

4. Selektor Universal (Universal Selector)

Selektor universal digunakan untuk memilih semua elemen dalam dokumen. Selektor ini ditulis dengan tanda *.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Contoh:

<div>Konten</div>
<p>Paragraf</p>

5. Selektor Atribut (Attribute Selector)

Selektor atribut digunakan untuk memilih elemen berdasarkan atribut tertentu. Contoh:

input[type="text"] {
    border: 1px solid #ccc;
    padding: 5px;
}

Contoh:

<input type="text" placeholder="Masukkan teks">

6. Selektor Grup (Group Selector)

Selektor grup digunakan untuk memberi gaya pada beberapa elemen sekaligus. Elemen-elemen dipisahkan dengan koma (,).

h1, h2, h3 {
    color: #333;
    font-family: Arial, sans-serif;
}

Contoh:

<h1>Judul 1</h1>
<h2>Judul 2</h2>

Kesimpulan

Dengan memahami jenis-jenis selektor di CSS, Anda dapat memilih elemen HTML secara efisien untuk diberikan gaya. Kombinasikan selektor-selektor ini untuk menciptakan desain web yang kompleks dan menarik.