CSS Selectors Lanjutan: Child, Sibling, dan Attribute Selectors.

1. Kombinator: Memilih Berdasarkan Hubungan

Kombinator menjelaskan hubungan antara dua selector. Ini sangat efisien untuk merapikan layout portal berita.

A. Descendant Selector (Spasi)

Memilih semua elemen di dalam elemen induk, tidak peduli seberapa dalam levelnya.

• Syntax: div p (Semua

  di dalam

  ).

   

• Kegunaan: Mengatur gaya teks di seluruh area artikel.

B. Child Selector (>)

Memilih elemen yang merupaka n anak langsung (direct child) dari induknya.

• Syntax: ul > li (Hanya

• yang berada tepat di bawah
  • ).

   

  • Kegunaan: Berguna untuk navigasi menu agar tidak merusak gaya sub-menu.

  C. Adjacent Sibling Selector (+)

  Memilih elemen yang berada tepat setelah elemen tertentu pada level yang sama.

  • Syntax: h2 + p (Hanya paragraf pertama yang muncul tepat setelah judul).

  • Kegunaan: Membuat "Lead Paragraph" atau paragraf pembuka berita agar terlihat berbeda.

  ---

  2. Attribute Selectors: Memilih Berdasarkan Atribut

  Ini adalah "senjata rahasia" bagi Backend Developer. Kamu bisa memilih elemen berdasarkan atribut HTML-nya (seperti type, href, atau target).

  • [attribute]: Memilih elemen yang memiliki atribut tersebut.

    • Contoh: img[alt] (Semua gambar yang punya teks alternatif).

  • [attribute="value"]: Memilih elemen dengan nilai atribut yang pas.

    • Contoh: input[type="text"] (Hanya input teks, bukan tombol).

  • [attribute^="value"]: Memilih yang diawali dengan nilai tertentu.

    • Contoh: a[href^="https"] (Semua link yang aman/secure).

  ---

  3. Tutorial: Implementasi pada Fitur SatuMedia

  Mari kita terapkan selector ini untuk merapikan tampilan daftar berita dan form pencarian.

  Kode HTML:

  HTML

  <nav class="main-nav"> <ul> <li><a href="/">Berandaa>li> <li><a href="/tech">Teknologia>li> ul>
  nav> <article  class="post"> <h2>Judul Beritah2> <p>Ini paragraf pembuka (Lead).p> <p>Ini paragraf isi berita.p> <a href="https://google.com" target="_blank">Sumber Eksternala>
  article>
  

  Kode CSS:

  CSS

  /* 1. Child Selector: Hanya link di menu utama yang tebal */
  .main-nav > ul > li > a { font-weight: bold;
  } /* 2. Adjacent Sibling: Paragraf tepat setelah H2 ukurannya lebih besar */
  h2 + p { font-size: 1.2rem; color: #333;
  } /* 3. Attribute Selector: Memberi ikon pada link eksternal */
  a[target="_blank"] { color: orange;
  } /* Menghias input pencarian spesifik */
  input[name="q"] { border-radius: 20px; padding-left: 10px;
  }
  

  ---

  Tips Profesional untuk Dika

  1. Gunakan > untuk Performa: Selector anak langsung (>) lebih cepat diproses oleh browser (termasuk Safari di Mac M4 kamu) daripada descendant selector (spasi) karena browser tidak perlu mencari hingga ke level terdalam.

  2. Validasi di Kolak Pisang: Untuk proyek Kolak Pisang (data kependudukan), gunakan Attribute Selector untuk membedakan gaya input yang required atau readonly.

     • Contoh: input[required] { border-left: 3px solid red; }

  3. Jangan Terlalu Spesifik: Hindari selector yang terlalu panjang seperti body div section article p span. Ini akan sangat suli t dikelola jika strukturnya berubah.

  ---

  Kesimpulan

  Selector lanjutan memungkinkan kamu menulis CSS yang lebih "pintar" dan minim class. Dengan memahami hubungan antar elemen, kamu bisa menjaga file HTML tetap bersih dan elegan.