📛 Advanced Selectors

Panduan lengkap CSS Advanced Selectors untuk seleksi elemen yang lebih presisi

📌 Elements

💡 Advanced Selector Fundamentals

Advanced Selectors memungkinkan Anda memilih elemen dengan lebih spesifik berdasarkan hubungan, atribut, atau kondisi tertentu.

advanced-selectors.css
/* Attribute Selector */
input[type="text"] {
  border: 2px solid #9333ea;
}

/* Child Combinator */
ul > li {
  list-style-type: none;
}

/* General Sibling */
h2 ~ p {
  color: #a855f7;
}

📝 Penjelasan Detail:

â€ĸ [attribute] - Memilih elemen berdasarkan atribut
â€ĸ > - Child combinator memilih elemen anak langsung
â€ĸ ~ - General sibling memilih semua saudara berikutnya
â€ĸ + - Adjacent sibling memilih saudara berikutnya langsung

🛠ī¸ Features

attribute-selectors.css
/* Attribute Starts With */
a[href^="https"] {
  color: #4CAF50;
}

/* Attribute Ends With */
a[href$=".pdf"] {
  background: url('pdf-icon.png');
}

/* Attribute Contains */
img[src*="logo"] {
  border: 1px solid #9333ea;
}

ℹī¸ Browser Support

Attribute Selectors didukung penuh di Chrome 1+, Firefox 1+, Safari 3+, IE 7+. Advanced selectors bekerja di semua browser modern.

📊 Basic Tables

combinators.css
/* Descendant Selector */
.container p {
  color: #e0e0e0;
}

/* Child Selector */
nav > ul {
  padding-left: 0;
}

/* Adjacent Sibling */
h2 + p {
  margin-top: 0;
}

/* General Sibling */
h2 ~ p {
  font-weight: bold;
}

📝 Penjelasan Detail:

â€ĸ A B - Memilih semua B yang merupakan keturunan A
â€ĸ A > B - Memilih B yang merupakan anak langsung A
â€ĸ A + B - Memilih B yang langsung mengikuti A
â€ĸ A ~ B - Memilih semua B yang mengikuti A (saudara)

🚀 Advanced Table

pseudo-selectors.css
/* Structural Pseudo-classes */
li:nth-child(2n+1) {
  background: rgba(147, 51, 234, 0.1);
}

tr:nth-of-type(even) {
  background: #f5f5f5;
}

p:first-of-type {
  font-weight: bold;
}

:not(.ignore) {
  opacity: 0.9;
}

ℹī¸ Browser Support

Structural pseudo-classes: Chrome 1+, Firefox 3.5+, Safari 3.1+, IE 9+. :not() selector: Chrome 1+, Firefox 3.5+, Safari 3.1+, IE 9+.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan advanced selectors untuk membuat CSS Anda lebih efisien dan maintainable, tetapi hindari kompleksitas yang tidak perlu.

best-practices.css
/* ✅ Good - Specific but readable */
nav[role="main"] > ul > li > a {
  color: #9333ea;
}

/* ✅ Good - Using :where() for lower specificity */
:where(section, article) h2 {
  font-size: 1.8rem;
}

/* ❌ Avoid - Too complex */
body > div:first-child > main > section:nth-of-type(3) > div > p:first-of-type {
  color: red;
}

📝 Penjelasan Detail:

â€ĸ Prioritaskan readability - Selector harus mudah dipahami
â€ĸ Gunakan :where() - Untuk mengurangi specificity ketika memungkinkan
â€ĸ Hindari over-qualifying - Jangan membuat rantai selector yang terlalu panjang
â€ĸ Manfaatkan attribute selectors - Untuk seleksi berbasis atribut yang fleksibel