Class Selector dan ID Selector CSS (.class dan #id)

Class selector

Class selector adalah titik yang diikuti nama class. Selector ini memberi style pada setiap elemen yang atribut class-nya berisi nama tersebut, apa pun jenis elemennya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Titik hanya muncul di CSS. Di HTML, atributnya adalah class="badge", tanpa titik. Nama class peka huruf besar kecil: .Badge tidak cocok dengan class="badge".

Beberapa class pada satu elemen

Sebuah elemen bisa membawa class sebanyak apa pun, dipisahkan spasi. Setiap class membawa aturannya sendiri, dan begitulah kamu membangun varian dari bagian-bagian kecil:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, tanpa spasi, cocok dengan elemen yang punya kedua class itu. Span terakhir punya danger tetapi tidak punya btn, jadi aturan berantai itu melewatinya.

Variasi class selector

Perbedaan antara pakai spasi dan tanpa spasi dibahas bersama combinator lain di halaman selector CSS.

ID selector

ID selector adalah tanda pagar yang diikuti id: #site-header memberi style pada elemen dengan id="site-header". Sebuah id harus unik di halaman, jadi ID selector menargetkan tepat satu elemen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Id berguna lebih dari sekadar style: href="#details" menggulir ke elemen itu, <label for="email"> menunjuk ke id sebuah input, dan JavaScript menemukannya dengan document.getElementById('details'). Itulah alasan umum memberi id pada elemen; untuk style, class adalah alat yang lebih tepat.

Class vs ID

Selisih specificity inilah alasan praktis untuk memberi style dengan class. Satu ID mengalahkan class sebanyak apa pun, jadi aturan yang ditulis dengan ID hanya bisa ditimpa oleh ID lain, inline style, atau !important:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Menambah dan menghapus class dengan JavaScript

Class adalah cara yang biasa bagi JavaScript untuk mengubah tampilan sesuatu: CSS menentukan state-nya, script hanya mengganti-gantinya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList juga punya add, remove, contains, dan replace. Hindari mengisi className secara langsung: cara itu mengganti semua class yang dimiliki elemen.

Memberi nama class

• Huruf, angka, tanda hubung, dan garis bawah aman dipakai: card, card-title, card__title, is-open.
• Jangan awali selector dengan angka atau tanda hubung yang diikuti angka. .2col adalah CSS yang tidak valid. Awali dengan huruf (.cols-2) atau escape angkanya (.\32 col).
• Beri nama berdasarkan fungsi, bukan tampilan: .error bertahan saat desain diubah, .red-text tidak.
• Konvensi penamaan membantu di proyek yang lebih besar. BEM menulis block__element--modifier, misalnya .card__title--large.

Kesalahan umum

• Menaruh titik di HTML. class=".badge" tidak akan pernah cocok dengan .badge.
• Dua atribut class. <p class="a" class="b"> hanya menyimpan a. Pakai class="a b".
• Memakai spasi padahal maksudnya kedua class. .btn .primary mencari elemen bersarang; .btn.primary adalah elemen yang sama.
• Memakai ulang sebuah id. Id ganda merusak getElementById, link anchor, dan hubungan label, meskipun CSS-nya tampak berfungsi.
• Memberi style semuanya dengan id. Specificity-nya membuat penimpaan di kemudian hari jadi menyulitkan; pakai class.