📛 Pseudo-classes & Elements

Panduan lengkap CSS Pseudo-classes & Elements untuk styling web modern

📌 Elements

💡 Selector Fundamental

Pseudo-classes dan pseudo-elements adalah fitur CSS yang memungkinkan Anda memilih elemen berdasarkan keadaan atau bagian tertentu dari elemen tersebut.

pseudo-selectors.css
/* Pseudo-classes */
a:hover {
  color: #a855f7;
  transition: color 0.3s ease;
}

input:focus {
  outline: 2px solid #9333ea;
  border-color: transparent;
}

/* Structural pseudo-classes */
li:nth-child(odd) {
  background: rgba(147, 51, 234, 0.1);
}

/* Pseudo-elements */
.card::before {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, #9333ea, #a855f7);
}

📝 Penjelasan Detail:

â€ĸ :hover - Pseudo-class untuk keadaan hover
â€ĸ :focus - Pseudo-class untuk keadaan fokus
â€ĸ :nth-child() - Pseudo-class untuk memilih elemen berdasarkan urutan
â€ĸ ::before - Pseudo-element untuk menambahkan konten sebelum elemen
â€ĸ ::after - Pseudo-element untuk menambahkan konten setelah elemen

🛠ī¸ Features

advanced-pseudo.css
/* Combining pseudo-classes */
button:hover:focus {
  background: #9333ea;
  color: white;
}

/* Using pseudo-elements with content */
.tooltip::after {
  content: "Info";
  background: #a855f7;
  color: white;
}

/* Customizing form elements */
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

ℹī¸ Browser Support

Pseudo-classes dan pseudo-elements didukung penuh oleh semua browser modern (Chrome, Firefox, Safari, Edge). Beberapa pseudo-class seperti :focus-within memerlukan dukungan tambahan di browser lama.

📊 Basic Tables

pseudo-values.css
/* Common Pseudo-classes */
:hover       /* Elemen saat dihover */
:focus       /* Elemen saat fokus */
:active      /* Elemen saat aktif */
:first-child  /* Elemen pertama */
:last-child   /* Elemen terakhir */

/* Common Pseudo-elements */
::before     /* Konten sebelum elemen */
::after      /* Konten setelah elemen */
::first-line  /* Baris pertama teks */
::first-letter /* Huruf pertama teks */

📝 Penjelasan Detail:

â€ĸ Pseudo-classes digunakan untuk memilih elemen berdasarkan keadaan atau posisi.
â€ĸ Pseudo-elements digunakan untuk memilih bagian tertentu dari elemen.
â€ĸ :hover dan :focus adalah pseudo-class yang paling umum digunakan.
â€ĸ ::before dan ::after adalah pseudo-elements yang sering digunakan untuk styling tambahan.

🚀 Advanced Table

advanced-pseudo.css
/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

/* Styling placeholder text */
::placeholder {
  color: #a855f7;
  opacity: 0.7;
}

/* Selecting empty elements */
div:empty {
  display: none;
}

ℹī¸ Browser Support

Pseudo-elements seperti ::placeholder dan ::-webkit-scrollbar memiliki dukungan terbatas di beberapa browser. Selalu periksa kompatibilitas sebelum digunakan.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan pseudo-classes dan pseudo-elements untuk meningkatkan interaktivitas dan tampilan tanpa menambahkan markup HTML tambahan.

best-practices.css
/* ✅ Good - Simple and effective */
button:hover {
  background: #9333ea;
}

/* ❌ Avoid - Overcomplicating */
button:hover:focus:active {
  background: #a855f7;
  color: white;
  border: 2px solid #9333ea;
}

📝 Penjelasan Detail:

â€ĸ Keep it simple - Gunakan pseudo-classes dan pseudo-elements dengan bijak.
â€ĸ Avoid overcomplicating - Jangan menggabungkan terlalu banyak pseudo-classes.
â€ĸ Test cross-browser - Selalu uji di berbagai browser untuk memastikan kompatibilitas.
â€ĸ Use for enhancement - Gunakan fitur ini untuk meningkatkan pengalaman pengguna, bukan sebagai kebutuhan utama.