Type Selector

Setiap elemen HTML dibuat dari sebuah tag yang membawa nama bermakna: h1 untuk judul, p untuk paragraf, a untuk tautan, dan button untuk tombol. Type selector memanfaatkan nama tersebut sebagai cara menunjuk elemen: kita menuliskan nama tag tanpa tanda tambahan apa pun, lalu browser menerapkan gaya pada seluruh elemen dengan nama yang sama. Cara ini lazim menjadi lapisan pertama dalam sebuah stylesheet karena mampu menetapkan gaya dasar tipografi dan komponen secara seragam. Pada Chapter ini kita membahas sintaks type selector, kapan cara ini tepat dipakai, serta batasan yang membuat kita tetap membutuhkan class dan selector lain.

Sintaks dan Cara Kerja #

Sebuah aturan type selector terdiri atas nama elemen diikuti blok deklarasi. Browser mencocokkan nama tersebut terhadap seluruh elemen dokumen tanpa memandang kedalaman posisinya di pohon DOM. File CSS berikut menetapkan gaya dasar untuk empat jenis elemen sekaligus:

h1 {
  color: rgb(15, 118, 110);
  font-size: 28px;
}

p {
  color: rgb(71, 85, 105);
  line-height: 1.5;
}

a {
  color: rgb(220, 38, 38);
}

button {
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
  border-radius: 6px;
}

HTML pendampingnya sengaja dibuat polos tanpa class maupun id, agar terlihat bahwa gaya tetap terpasang:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Type Selector — Demo</title>
  <link rel="stylesheet" href="contoh-aturan-dasar.css">
</head>
<body>
  <h1>Catatanku</h1>
  <p>Paragraf pertama dengan gaya dasar.</p>
  <p>Paragraf kedua mendapat gaya yang sama persis.</p>
  <a href="https://example.com">Baca dokumentasi</a>
  <button type="button">Simpan</button>
</body>
</html>

Hasil di Browser:

Judul "Catatanku" tampil hijau teal (color: rgb(15, 118, 110)) dengan
font-size 28px.
Kedua paragraf sama-sama abu-abu kebiruan: color rgb(71, 85, 105) dan
line-height 24px (1,5 kali font-size 16px).
Tautan tampil merah (color: rgb(220, 38, 38)).
Tombol tampil biru dengan teks putih dan sudut membulat:
background-color rgb(2, 132, 199), color rgb(255, 255, 255),
border-radius 6px.

Mari kita telaah aturan CSS di atas baris demi baris:

1. Baris 1 (h1 {): selector h1 menunjuk semua elemen <h1> di halaman. Tidak ada tanda awalan seperti titik atau pagar; nama tag ditulis apa adanya.
2. Baris 2–3: judul diberi warna teal dan ukuran 28px, menggantikan gaya bawaan browser untuk <h1>.
3. Baris 6–8 (p { ... }): aturan ini menunjuk semua elemen <p>. Karena halaman memuat dua paragraf, keduanya menerima gaya yang identik — inilah perilaku khas type selector.
4. Baris 8 (line-height: 1.5;): nilai tanpa satuan berarti proporsi dari font-size, sehingga pada teks 16px tinggi barisnya menjadi 24px.
5. Baris 11–13 (a { ... }): semua tautan diubah dari biru bawaan browser menjadi merah.
6. Baris 15–18 (button { ... }): tombol diberi latar biru, teks putih, dan sudut membulat 6px.

Kapan Type Selector Tepat Dipakai #

Type selector paling pas untuk menetapkan baseline: gaya default yang berlaku seragam pada satu jenis elemen di seluruh halaman. Contohnya menyetel warna teks, jarak baris paragraf, atau perilaku gambar. Aturan berikut memastikan gambar tidak meluber dari kontainernya:

img {
  max-width: 100%;
  display: block;
}

Kelebihan utama type selector adalah keringkasan dan cakupannya. Aturan yang ditulis sekali otomatis mengenai elemen baru yang muncul belakangan, termasuk konten hasil render JavaScript, tanpa perlu diperbarui.

Kebalikannya, cakupan yang luas itu juga menjadi kebatasan. Type selector tidak dapat membedakan dua kelompok elemen sejenis dengan peran berbeda: dengan aturan p di atas, paragraf kutipan dan paragraf catatan kaki menerima warna yang sama persis. Untuk memilah elemen berdasarkan peran, kita butuh class selector pada Chapter Class dan ID Selector .

Case Sensitivity dan Specificity #

Pada dokumen HTML, pencocokan type selector tidak peka huruf besar-kecil: selector H1 dan h1 menghasilkan pencocokan yang sama, karena nama tag HTML memang tidak peka huruf. Beda halnya pada dokumen XML — termasuk XHTML yang disajikan sebagai XML — di mana pencocokan bersifat case-sensitive sehingga H1 tidak akan mengenai <h1>. Rincian perilaku ini terdokumentasi pada Type selectors di MDN .

Dari sisi specificity, type selector menyumbang komponen terendah, yaitu (0, 0, 1). Artinya, satu aturan class (0, 1, 0) maupun satu aturan ID (1, 0, 0) selalu lebih kuat daripadanya. Kekuatan yang rendah ini justru menguntungkan untuk baseline karena gaya dasar mudah ditimpa oleh gaya yang lebih spesifik; perhitungan lengkapnya kita kupas pada Chapter Specificity .

Demo pada chapter ini membawa penanda uji data-expected yang memverifikasi klaim di atas melalui harness Course: nilai color, font-size, line-height, background-color, dan border-radius pada kelima elemen contoh diperiksa langsung oleh headless browser.

h1 {
  color: rgb(15, 118, 110);
  font-size: 28px;
}

p {
  color: rgb(71, 85, 105);
  line-height: 1.5;
}

a {
  color: rgb(220, 38, 38);
}

button {
  background-color: rgb(2, 132, 199);
  color: rgb(255, 255, 255);
  border-radius: 6px;
}