CSS Ninja Kit: Kumpulan Trik Selector Biar Ngoding Lebih Rapi dan Pintar

Posted on by OmPuter

Kalau kamu sering ngoding CSS, pasti pernah ngalamin hal ini:

  • Mau kasih margin ke <h1> tapi yang pertama jangan kena.
  • Mau styling elemen ke-3 aja.
  • Mau pilih semua elemen kecuali yang tertentu.

Nah, di sinilah CSS selector level ninja beraksi. Dengan selector yang tepat, kode CSS kamu jadi ringkas, rapi, dan nggak perlu ngotak-atik HTML. Yuk, kita bedah satu per satu.

1. Skip Elemen Pertama dengan :first-of-type

Misalnya, kamu mau semua <h1> punya margin-top: 2em, tapi yang pertama jangan.

.content h1:not(:first-of-type) {
  margin-top: 2em;
}

📌 Tips:

  • :first-of-type memilih elemen pertama dari jenis yang sama di dalam parent.
  • Kalau mau semua kecuali pertama, kombinasikan dengan :not().

2. Styling Elemen Terakhir dengan :last-of-type

Kadang kamu cuma mau ngubah tampilan elemen terakhir, misalnya paragraf terakhir di artikel:

.article p:last-of-type {
  font-style: italic;
}

3. Pilih Elemen ke-N dengan :nth-of-type(n)

Mau kasih style ke elemen ke-3 aja? Gunakan ini:

.list-item:nth-of-type(3) {
  background-color: yellow;
}

💡 Bisa juga pakai pola:

  • :nth-of-type(odd) → elemen ganjil
  • :nth-of-type(even) → elemen genap
  • :nth-of-type(3n) → setiap kelipatan 3

4. Pilih Semua Kecuali yang Tertentu dengan :not()

Kalau mau kasih style ke semua <p> kecuali yang punya class .no-style:

p:not(.no-style) {
  color: #333;
}

5. Gabungkan Selector Biar Hemat Baris

Selector bisa digabung supaya CSS lebih ringkas. Contoh:

h1:not(:first-of-type),
h2:not(:first-of-type) {
  margin-top: 2em;
}

6. Memilih Elemen Berdasarkan Sibling (+ dan ~)

Kadang kamu mau style elemen yang muncul setelah elemen tertentu:

h1 + p {
  font-weight: bold; /* paragraf pertama setelah h1 */
}

h1 ~ p {
  color: gray; /* semua paragraf setelah h1 */
}

7. Gunakan > untuk Anak Langsung

Kalau cuma mau pilih anak langsung dari suatu elemen (bukan cucu atau cicit):

.container > p {
  margin: 0;
}

8. Bonus: Selector Atribut

Buat style elemen berdasarkan atributnya:

input[type="text"] {
  border: 1px solid #ccc;
}

a[target="_blank"] {
  color: red;
}

Penutup

Dengan menguasai selector CSS ini, kamu bisa:

  • Mengurangi jumlah class/ID yang nggak perlu.
  • Menulis CSS lebih singkat dan efisien.
  • Nggak ribet lagi ngubah HTML cuma buat styling.

Kalau CSS itu pedang, selector ini adalah jurus ninjanya. Semakin banyak jurus yang kamu hafal, semakin cepat dan tepat kamu “menebas” masalah styling di project.

Selamat berlatih, Ninja CSS! 🥷✨

Post Views: 207