Sip, kita lanjutkan dengan materi berikutnya, yaitu Selector Dasar CSS. Ini adalah kunci utama untuk bisa "ngobrol" dengan elemen HTML dari CSS, yaitu cara memilih elemen mana yang mau kita kasih gaya.

Milih Elemen HTML yang Mau Didandanin: Kenalan Sama Selector Dasar CSS!

Udah tau kan cara nulis aturan CSS dan cara nempelinnya ke HTML? Nah, sekarang kita masuk ke bagian yang seru: gimana caranya milih elemen HTML spesifik yang mau kita kasih style? Di sinilah peran Selektor CSS (CSS Selectors).

Selektor itu kayak "alamat" atau "penunjuk" yang kita pake buat ngasih tau browser, "Hei, browser! Tolong dandanin elemen yang ini ya, bukan yang itu!" Kalau selektornya salah, ya dandanan CSS-mu bisa nyasar ke elemen yang gak kamu maksud.

Ada banyak banget jenis selektor di CSS, dari yang simpel sampe yang rumit. Tapi, buat permulaan, kita kenalan dulu sama tiga jagoan selektor dasar yang paling sering dipake:

Type Selector (Selektor Tipe/Elemen)
Class Selector (Selektor Kelas)
ID Selector (Selektor ID)

Yuk, kita bedah satu-satu!

1. Type Selector (Selektor Tipe/Elemen) - Nargetin Semua yang Sejenis

Ini selektor yang paling simpel. Kamu cukup nulis nama tag HTML-nya langsung sebagai selektor. Aturan CSS-nya bakal diterapin ke semua elemen dengan nama tag tersebut yang ada di halaman.

Sintaks: namaTag
Contoh:
- p (bakal milih semua elemen <p>)
- h1 (bakal milih semua elemen <h1>)
- div (bakal milih semua elemen <div>)
- li (bakal milih semua elemen <li>)

Contoh Penggunaan di CSS:

css

/* Semua paragraf (<p>) akan punya teks warna abu-abu tua */
p {
    color: #333333;
}
 
/* Semua judul level 2 (<h2>) akan punya garis bawah */
h2 {
    border-bottom: 1px solid gray;
}
 
/* Semua item daftar (<li>) akan punya sedikit padding kiri */
li {
    padding-left: 10px;
}

Kapan Dipake?

Pas kamu mau ngasih style dasar yang berlaku umum buat semua elemen sejenis di seluruh website (misalnya, ngatur font default buat semua paragraf).
Tapi hati-hati, karena dia nargetin semua, kadang bisa jadi terlalu umum dan "nimpa" style lain kalau gak diatur dengan baik.

2. Class Selector (Selektor Kelas) - Nargetin Kelompok Elemen Spesifik

Ini selektor yang super fleksibel dan paling sering dipake! Dengan Class Selector, kamu bisa ngasih "label" atau "kelas" ke satu atau beberapa elemen HTML, terus kamu bisa ngasih style khusus buat semua elemen yang punya kelas itu.

Cara Kerjanya:
1. Di file HTML-mu, tambahin atribut class ke elemen yang mau kamu kasih style, terus kasih nama kelasnya. Satu elemen bisa punya beberapa nama kelas sekaligus (dipisah spasi). Nama kelas tidak boleh mengandung spasi (kalau mau multi-kata, pake tanda hubung - atau underscore _). Nama kelas juga case-sensitive (huruf besar/kecil dianggap beda).
2. Di file CSS-mu, tulis selektor kelasnya dengan diawali tanda titik (.) diikuti nama kelasnya.
Sintaks HTML: <namaTag class="nama-kelas-1 nama-kelas-2">
Sintaks CSS: .nama-kelas

Contoh Penggunaan:

File HTML (index.html):

html

<body>
    <h1 class="judul-utama biru-terang">Selamat Datang!</h1>
    <p class="paragraf-pembuka">Ini adalah paragraf pembuka yang penting.</p>
    <p>Ini paragraf biasa, gak punya kelas khusus.</p>
    <button class="tombol utama">Kirim</button>
    <button class="tombol sekunder">Batal</button>
    <div class="kotak peringatan">
        <p class="paragraf-pembuka">Pesan di dalam kotak peringatan.</p>
    </div>
</body>

<h1> punya dua kelas: judul-utama dan biru-terang.
<p> pertama dan <p> di dalam <div> sama-sama punya kelas paragraf-pembuka.
<div> punya dua kelas: kotak dan peringatan.

File CSS (style.css):

css

/* Style untuk elemen dengan kelas "judul-utama" */
.judul-utama {
    font-size: 32px;
    margin-bottom: 20px;
}
 
/* Style untuk elemen dengan kelas "biru-terang" */
.biru-terang {
    color: lightskyblue;
}
 
/* Style untuk elemen dengan kelas "paragraf-pembuka" */
.paragraf-pembuka {
    font-weight: bold;
    font-style: italic;
}
 
/* Style untuk elemen dengan kelas "tombol" */
.tombol {
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}
 
/* Style spesifik untuk elemen dengan kelas "utama" (biasanya digabung dengan .tombol) */
.tombol.utama { /* Menargetkan elemen yang punya KEDUA kelas: tombol DAN utama */
    background-color: green;
    color: white;
}
 
/* Style spesifik untuk elemen dengan kelas "sekunder" */
.tombol.sekunder {
    background-color: gray;
    color: black;
}
 
/* Style untuk elemen dengan kelas "kotak" */
.kotak {
    border: 1px solid #ccc;
    padding: 15px;
}
 
/* Style untuk elemen dengan kelas "peringatan" */
.kotak.peringatan { /* Menargetkan elemen yang punya KEDUA kelas: kotak DAN peringatan */
    background-color: lightyellow;
    border-color: orange;
}

Kelebihan Class Selector:

Reusable: Kamu bisa pake nama kelas yang sama di banyak elemen, bahkan di elemen dengan tag yang beda.
Spesifik: Kamu bisa ngasih style yang beda-beda ke elemen yang sama tag-nya, cukup dengan ngasih kelas yang beda.
Modular: Kamu bisa bikin "komponen" style kecil-kecil pake kelas, terus digabung-gabung di elemen HTML.

Kapan Dipake?

Ini selektor pilihan utama buat sebagian besar kebutuhan styling. Kalau kamu mau ngasih style ke satu atau sekelompok elemen tertentu, kemungkinan besar kamu bakal pake class selector.

3. ID Selector (Selektor ID) - Nargetin Satu Elemen Unik

ID Selector dipake buat nargetin satu elemen yang bener-bener unik di seluruh halaman HTML.

Cara Kerjanya:
1. Di file HTML-mu, tambahin atribut id ke satu elemen spesifik yang mau kamu style. Nilai id harus unik di seluruh halaman tersebut (gak boleh ada dua elemen dengan id yang sama). Nama ID punya aturan yang mirip sama nama kelas (gak boleh spasi, case-sensitive).
2. Di file CSS-mu, tulis selektor ID-nya dengan diawali tanda pagar (#) diikuti nama ID-nya.
Sintaks HTML: <namaTag id="nama-id-unik">
Sintaks CSS: #nama-id-unik

Contoh Penggunaan:

File HTML (index.html):

html

<body>
    <header id="header-utama">
        <h1>Logo Perusahaan</h1>
    </header>
    <nav id="navigasi-situs">
        <!-- Isi navigasi -->
    </nav>
    <div id="konten-spesial">
        <p>Ini adalah konten yang sangat spesial dan unik.</p>
    </div>
</body>

File CSS (style.css):

css

/* Style untuk elemen dengan ID "header-utama" */
#header-utama {
    background-color: #333;
    color: white;
    padding: 20px;
}
 
/* Style untuk elemen dengan ID "navigasi-situs" */
#navigasi-situs {
    background-color: #eee;
    padding: 10px;
}
 
/* Style untuk elemen dengan ID "konten-spesial" */
#konten-spesial {
    border: 2px dashed blue;
    margin-top: 20px;
}

Penting Soal ID Selector:

UNIK! UNIK! UNIK!: Satu id cuma boleh dipake sekali per halaman HTML. Kalau kamu pake id yang sama di beberapa elemen, itu HTML-nya jadi gak valid dan perilakunya bisa gak terduga (terutama kalau dipake sama JavaScript).
Spesifisitas Tinggi: ID selector punya "kekuatan" atau spesifisitas yang lebih tinggi dibanding class selector atau type selector. Artinya, style dari ID selector cenderung lebih "menang" kalau ada konflik. (Ini bakal kita bahas lebih dalem di materi Spesifisitas).

Kapan Dipake?

Buat nargetin elemen yang bener-bener unik dan cuma ada satu di halaman itu (misalnya, header utama, footer utama, menu navigasi utama, atau bagian layout utama yang spesifik).
Sering juga dipake sebagai "cantolan" buat JavaScript (document.getElementById()).
Buat bikin anchor link (link internal yang lompat ke bagian tertentu di halaman).

Kapan HINDARI Pake ID Selector (buat styling)?

Jangan pake ID selector buat ngasih style ke elemen yang mungkin bakal muncul berulang kali atau yang style-nya mau kamu pake lagi di tempat lain. Buat kasus kayak gitu, Class Selector jauh lebih baik.
Banyak developer modern cenderung lebih jarang pake ID selector buat styling murni dan lebih milih pake class selector karena class lebih fleksibel dan reusable. ID lebih sering disimpen buat keperluan JavaScript atau anchor link. Tapi, ini masalah preferensi dan konvensi tim juga.

Mana yang Dipilih? Type, Class, atau ID?

Pake Type Selector buat style dasar yang berlaku umum buat semua elemen sejenis.
Pake Class Selector buat sebagian besar kebutuhan styling. Ini yang paling fleksibel dan reusable. Kamu bisa ngasih beberapa class ke satu elemen, atau satu class ke banyak elemen.
Pake ID Selector buat elemen yang bener-bener unik di halaman, atau buat keperluan JavaScript/anchor link. Gunakan dengan bijak untuk styling.

Menguasai tiga selektor dasar ini adalah langkah awal yang super penting buat bisa "ngobrol" sama CSS dan ngasih gaya ke elemen HTML-mu dengan tepat sasaran!

Kuis Selector Dasar CSS

Pertanyaan 1 dari 4

Selektor CSS apa yang digunakan untuk menargetkan SEMUA elemen `<p>` (paragraf) di sebuah halaman HTML?