CSS Selector: Jenis, Combinator dan Attribute Selector

Apa itu selector CSS

Selector adalah bagian dari sebuah aturan sebelum kurung kurawal. Selector menentukan elemen mana yang dikenai deklarasinya.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Lima selector dasar ini sudah mencakup sebagian besar stylesheet sungguhan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Jenis selector secara ringkas

Class dan ID punya halamannya sendiri, CSS class selector. Pseudo-class seperti :nth-child() dan :not() dibahas di halaman pseudo-class.

Combinator: descendant vs child

Combinator menggabungkan dua selector berdasarkan hubungannya di pohon HTML. Ada empat jenis.

Spasi dan > adalah pasangan yang sering tertukar. Descendant selector menjangkau kedalaman berapa pun, sedangkan child selector berhenti di satu tingkat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Sibling combinator: + dan ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Combinator sibling hanya melihat ke depan. Tidak ada combinator "saudara sebelumnya", tetapi :has() bisa menyatakannya: h2:has(+ p) cocok dengan h2 yang langsung diikuti oleh p.

Attribute selector

Kurung siku mencocokkan atribut dan nilainya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Attribute selector pada atribut data-* adalah cara yang rapi untuk memberi style pada state yang diatur JavaScript, tanpa perlu membuat nama class baru.

Coba selector apa saja

Ketik sebuah selector di kotak. Setiap elemen yang cocok mendapat outline kuning, dan jumlahnya ditampilkan di bawah.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Coba #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Gabungan vs descendant: spasinya berpengaruh

p.note dan p .note hanya berbeda satu spasi, tetapi artinya berbeda.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Cara browser membaca selector

Saat beberapa aturan cocok dengan elemen yang sama dan mengatur property yang sama, selector yang lebih spesifik yang menang, dan kalau sama kuat, yang ditulis belakangan yang menang. ID mengalahkan class berapa pun jumlahnya, dan class mengalahkan type selector berapa pun jumlahnya. Halaman !important punya tabel specificity lengkapnya.

Grup punya satu jebakan: kalau ada satu selector yang tidak valid di daftar biasa, seluruh aturannya dibuang. Di a, b:unknown { }, bahkan link-nya pun tidak diberi style. Membungkus daftar itu dengan :is() membuatnya lebih toleran, jadi :is(a, b:unknown) tetap memberi style pada link.

Kesalahan yang sering terjadi

• Lupa titik atau tanda pagar. tip { } menyasar elemen <tip>, bukan class="tip". Tulis .tip.
• Spasi di selector gabungan. p .note tidak sama dengan p.note.
• Mengira > menjangkau cucu. Pakai spasi untuk kedalaman berapa pun.
• Satu salah ketik merusak seluruh grup. Di h1, h2:hovr, h3, tidak ada yang diberi style.
• Selector yang terlalu panjang. body div.wrapper ul li a lambat dibaca dan sulit ditimpa. Satu class biasanya sudah cukup.