Element Selector

Element selector adalah selector pertama yang kita temui di course ini dan tetap menjadi yang paling sering dipakai: cukup tulis nama tag-nya, dan semua elemen sejenis ikut teratur. Kesederhanaan ini justru kekuatannya — satu aturan p singkat mengatur ritme baca seluruh halaman tanpa perlu menandai setiap paragraf satu per satu. Di chapter ini kita merumuskan kapan element selector tepat dipakai, menyusun gaya dasar (baseline) dengannya, lalu mengenali batasnya sebelum aturan terasa terlalu luas.

Menyasar Berdasarkan Nama Tag #

h2 {
  border-bottom: 2px solid #d9d2c0;
  padding-bottom: 8px;
}

Browser mencocokkan selector dengan nama tag pada setiap elemen, tanpa memandang posisi atau induknya. Tidak ada atribut yang perlu ditambahkan ke HTML; cukup nama tag di sisi CSS. Karena itu, cakupan aturan bertambah otomatis setiap kali kita menambah elemen sejenis ke halaman — menulis blockquote baru pun langsung mengikuti aturan yang sudah ada.

Peran Terbaiknya: Gaya Dasar Halaman #

Karena berlaku luas, element selector paling nyaman dipakai untuk baseline: nilai bawaan yang berlaku seragam sebelum class menambahkan penyesuaian. Pola ini bekerja bersama cascade — aturan class yang lebih spesifik menimpa baseline dengan mudah:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2933;
}

p {
  margin: 0 0 16px;
}

a {
  color: #0f766e;
}

Demo berikut memakai element selector murni untuk mendandani satu fragmen halaman katalog:

Mari kita telaah aturan di atas:

1. body { ... }: nilai font dan warna ditetapkan di elemen yang mengurung seluruh dokumen, lalu mewarisi ke hampir semua elemen di dalamnya.
2. line-height: 1.6: rasio tanpa satuan sehingga aman diwariskan; detailnya kita bedah pada section Typography.
3. p { margin: 0 0 16px; }: mengganti margin bawaan paragraf dengan satu nilai yang seragam.
4. a { color: #0f766e; }: mengganti biru bawaan browser dengan warna dari palet proyek.

Baseline yang Cocok untuk Elemen Umum #

Tabel berikut merangkum titik awal yang lazim ditetapkan per jenis elemen:

Dua aturan baseline yang paling sering menyelamatkan layout:

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

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

Demo berikut memasang kedua baseline itu sekaligus — tampilan bawaan kontrol form memang berbeda antarbrowser, jadi penyesuaian kecilnya layak ditetapkan sejak awal:

Batas: Terlalu Luas untuk Kontrol Halus #

Kelemahan element selector adalah kebalikan kekuatannya: ia tidak mengenal pengecualian. Aturan p { margin: 0; } berlaku untuk paragraf artikel, keterangan gambar, hingga catatan kaki — meskipun hanya satu yang kita maksud. Begitu halaman punya beberapa “rasa” paragraf atau tombol, element selector bukan lagi alat yang tepat; saatnya beralih ke class.

Kebiasaan yang sehat: tetapkan baseline secara sengaja di awal berkas, lalu serahkan semua penyesuaian ke class. Dengan pembagian kerja ini, kita jarang perlu menambal aturan element selector di tempat lain — perubahan gaya dasar cukup dilakukan sekali di sumbernya.

Kesalahan Umum #

Ringkasan #

Element selector menyasar semua elemen dengan nama tag tertentu dan paling tepat dipakai sebagai lapisan baseline: tipografi, warna link, serta perilaku dasar gambar dan tombol. Karena bobotnya paling kecil setelah universal selector, aturan ini mudah ditimpa class — persis pembagian kerja yang sehat antara dasar dan penyesuaian. Chapter berikutnya memperkenalkan class selector, alat utama untuk menyasar sebagian elemen dengan presisi.