Selector: Memilih Elemen yang Ingin Distyle

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Menggunakan selector elemen, class, dan ID
Menggabungkan beberapa selector
Memahami konsep spesifisitas (elemen mana yang "menang")

Materi Singkat

Selector adalah cara CSS menjawab pertanyaan: "Elemen mana yang ingin saya ubah tampilannya?"

Bayangkan kamu di kelas dan guru ingin memanggil murid tertentu:

"Semua murid, berdiri!" — selector elemen (berlaku untuk semua)
"Murid yang pakai baju merah, maju!" — selector class (berlaku untuk grup)
"Budi, maju ke depan!" — selector ID (berlaku untuk satu orang spesifik)

Selector Elemen

Menargetkan semua elemen dengan tag tertentu:

p {
  color: #333;
}
 
h1 {
  font-size: 2rem;
}

Semua <p> di halaman akan berwarna #333.

Selector Class (`.`)

Class diawali dengan titik (.) di CSS. Di HTML, class ditambahkan dengan atribut class:

<p class="intro">Ini paragraf intro.</p>
<p class="intro">Ini juga paragraf intro.</p>
<p>Ini paragraf biasa.</p>

.intro {
  color: #2563eb;
  font-weight: bold;
}

Hanya dua paragraf pertama yang berubah. Satu elemen bisa punya banyak class:

<p class="intro highlight">Intro dan highlight sekaligus.</p>

Selector ID (`#`)

ID diawali dengan # di CSS. Di HTML, ID ditambahkan dengan atribut id. Satu ID hanya boleh ada satu kali per halaman:

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

#judul-utama {
  color: red;
  text-align: center;
}

Menggabungkan Selector

/* Menargetkan semua h1, h2, dan h3 */
h1, h2, h3 {
  font-family: Georgia, serif;
}
 
/* Menargetkan p yang ada di dalam section */
section p {
  line-height: 1.8;
}

Spesifisitas: Siapa yang "Menang"?

Jika beberapa selector berlaku pada elemen yang sama, yang paling spesifik yang menang:

ID lebih kuat dari class
Class lebih kuat dari elemen

p { color: red; }          /* spesifisitas rendah */
.teks { color: blue; }    /* lebih spesifik */
#utama { color: green; }  /* paling spesifik */

<p class="teks" id="utama">Warna apa?</p>
<!-- Jawaban: hijau (ID menang) -->

Contoh Kode

index.html:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar Selector</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="judul">Belajar Selector CSS</h1>
    <p class="intro">Paragraf ini pakai class "intro".</p>
    <p>Paragraf biasa tanpa class.</p>
    <p class="intro highlight">Paragraf dengan dua class.</p>
    <p class="highlight">Paragraf dengan class "highlight".</p>
  </body>
</html>

style.css:

/* Selector elemen */
body {
  font-family: sans-serif;
  padding: 20px;
}
 
/* Selector ID */
#judul {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}
 
/* Selector class */
.intro {
  color: #555;
  font-style: italic;
}
 
.highlight {
  background-color: #fef9c3;
  padding: 4px 8px;
}

Tugas Kecil

Lanjutkan file dari pelajaran sebelumnya atau buat yang baru
Di HTML, tambahkan:
- Sebuah <h1> dengan id="judul-halaman"
- Dua <p> dengan class="penting"
- Satu <p> dengan class="penting catatan" (dua class)
- Satu <p> tanpa class apapun
Di CSS, buat aturan untuk:
- #judul-halaman — warna teks pilihamu, garis bawah
- .penting — font tebal dan warna teks berbeda
- .catatan — background kuning muda (#fef9c3)
- p (semua paragraf) — jarak antar baris (line-height) 1.7

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Menggunakan selector elemen, class, dan ID
Menggabungkan beberapa selector
Memahami konsep spesifisitas (elemen mana yang "menang")

Materi Singkat

Selector adalah cara CSS menjawab pertanyaan: "Elemen mana yang ingin saya ubah tampilannya?"

Bayangkan kamu di kelas dan guru ingin memanggil murid tertentu:

"Semua murid, berdiri!" — selector elemen (berlaku untuk semua)
"Murid yang pakai baju merah, maju!" — selector class (berlaku untuk grup)
"Budi, maju ke depan!" — selector ID (berlaku untuk satu orang spesifik)

Selector Elemen

Menargetkan semua elemen dengan tag tertentu:

p {
  color: #333;
}
 
h1 {
  font-size: 2rem;
}

Semua <p> di halaman akan berwarna #333.

Selector Class (`.`)

Class diawali dengan titik (.) di CSS. Di HTML, class ditambahkan dengan atribut class:

<p class="intro">Ini paragraf intro.</p>
<p class="intro">Ini juga paragraf intro.</p>
<p>Ini paragraf biasa.</p>

.intro {
  color: #2563eb;
  font-weight: bold;
}

Hanya dua paragraf pertama yang berubah. Satu elemen bisa punya banyak class:

<p class="intro highlight">Intro dan highlight sekaligus.</p>

Selector ID (`#`)

ID diawali dengan # di CSS. Di HTML, ID ditambahkan dengan atribut id. Satu ID hanya boleh ada satu kali per halaman:

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

#judul-utama {
  color: red;
  text-align: center;
}

Menggabungkan Selector

/* Menargetkan semua h1, h2, dan h3 */
h1, h2, h3 {
  font-family: Georgia, serif;
}
 
/* Menargetkan p yang ada di dalam section */
section p {
  line-height: 1.8;
}

Spesifisitas: Siapa yang "Menang"?

Jika beberapa selector berlaku pada elemen yang sama, yang paling spesifik yang menang:

ID lebih kuat dari class
Class lebih kuat dari elemen

p { color: red; }          /* spesifisitas rendah */
.teks { color: blue; }    /* lebih spesifik */
#utama { color: green; }  /* paling spesifik */

<p class="teks" id="utama">Warna apa?</p>
<!-- Jawaban: hijau (ID menang) -->

Contoh Kode

index.html:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar Selector</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="judul">Belajar Selector CSS</h1>
    <p class="intro">Paragraf ini pakai class "intro".</p>
    <p>Paragraf biasa tanpa class.</p>
    <p class="intro highlight">Paragraf dengan dua class.</p>
    <p class="highlight">Paragraf dengan class "highlight".</p>
  </body>
</html>

style.css:

/* Selector elemen */
body {
  font-family: sans-serif;
  padding: 20px;
}
 
/* Selector ID */
#judul {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
}
 
/* Selector class */
.intro {
  color: #555;
  font-style: italic;
}
 
.highlight {
  background-color: #fef9c3;
  padding: 4px 8px;
}

Tugas Kecil

Lanjutkan file dari pelajaran sebelumnya atau buat yang baru
Di HTML, tambahkan:
- Sebuah <h1> dengan id="judul-halaman"
- Dua <p> dengan class="penting"
- Satu <p> dengan class="penting catatan" (dua class)
- Satu <p> tanpa class apapun
Di CSS, buat aturan untuk:
- #judul-halaman — warna teks pilihamu, garis bawah
- .penting — font tebal dan warna teks berbeda
- .catatan — background kuning muda (#fef9c3)
- p (semua paragraf) — jarak antar baris (line-height) 1.7

2. Selector: Memilih Elemen yang Ingin Distyle

Tujuan Belajar

Materi Singkat

Selector Elemen

Selector Class (`.`)

Selector ID (`#`)

Menggabungkan Selector

Spesifisitas: Siapa yang "Menang"?

Contoh Kode

Tugas Kecil

2. Selector: Memilih Elemen yang Ingin Distyle

Tujuan Belajar

Materi Singkat

Selector Elemen

Selector Class (`.`)

Selector ID (`#`)

Menggabungkan Selector

Spesifisitas: Siapa yang "Menang"?

Contoh Kode

Tugas Kecil

2. Selector: Memilih Elemen yang Ingin Distyle

Tujuan Belajar

Materi Singkat

Selector Elemen

Selector Class (.)

Selector ID (#)

Menggabungkan Selector

Spesifisitas: Siapa yang "Menang"?

Contoh Kode

Tugas Kecil

2. Selector: Memilih Elemen yang Ingin Distyle

Tujuan Belajar

Materi Singkat

Selector Elemen

Selector Class (.)

Selector ID (#)

Menggabungkan Selector

Spesifisitas: Siapa yang "Menang"?

Contoh Kode

Tugas Kecil

Selector Class (`.`)

Selector ID (`#`)

Selector Class (`.`)

Selector ID (`#`)