📛 Basic Selectors

Panduan lengkap CSS Basic Selectors untuk styling web modern

📌 Elements

💡 Selector Fundamental

CSS Selectors adalah pola yang digunakan untuk memilih elemen HTML yang ingin diberi styling. Memahami selectors adalah kunci untuk menguasai CSS.

selectors.css
/* Universal Selector */
* {
  margin: 0;
  padding: 0;
}

/* Element Selector */
h1 {
  color: #9333ea;
  font-size: 2.5rem;
}

/* Class Selector */
.header {
  background: linear-gradient(45deg, #9333ea, #a855f7);
  padding: 2rem;
}

/* ID Selector */
#main-content {
  max-width: 1200px;
  margin: 0 auto;
}

📝 Penjelasan Detail:

â€ĸ * - Universal Selector memilih semua elemen
â€ĸ h1, p, div - Element Selector memilih berdasarkan tag HTML
â€ĸ .class-name - Class Selector dimulai dengan titik (.)
â€ĸ #id-name - ID Selector dimulai dengan hash (#)
â€ĸ h1.title - Combined Selector untuk spesifitas lebih tinggi

🛠ī¸ Features

advanced-selectors.css
/* Descendant Selector */
.container p {
  color: #e0e0e0;
  line-height: 1.6;
}

/* Child Selector */
.nav > li {
  display: inline-block;
  margin: 0 1rem;
}

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

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

ℹī¸ Browser Support

Semua basic selectors didukung penuh oleh semua browser modern (Chrome 1+, Firefox 1+, Safari 1+, IE 7+).

📊 Basic Tables

selector-values.css
/* Priority Table (Specificity) */
*            /* 0,0,0,0 */
li           /* 0,0,0,1 */
.class       /* 0,0,1,0 */
#id          /* 0,1,0,0 */
style=""     /* 1,0,0,0 */

/* Common Patterns */
.btn.primary    /* Multiple classes */
div.container   /* Element + class */
#header .logo  /* ID + descendant */
ul li:first-child /* Pseudo-selector */

📝 Penjelasan Detail:

â€ĸ Specificity menentukan prioritas selector yang akan diterapkan
â€ĸ Semakin tinggi nilai specificity, semakin tinggi prioritasnya
â€ĸ !important akan override semua specificity
â€ĸ Best practice: hindari penggunaan !important yang berlebihan

🚀 Advanced Table

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);
}

ℹī¸ Browser Support

Pseudo-selectors: Chrome 1+, Firefox 1+, Safari 1+, IE 8+. Pseudo-elements dengan :: syntax: Chrome 1+, Firefox 1.5+, Safari 1+, IE 9+.

💡 Pro Tips

đŸŽ¯ Best Practices

Gunakan class selectors untuk styling utama, hindari over-nesting (max 3 levels), dan prioritaskan readability over cleverness.

best-practices.css
/* ✅ Good - Readable and maintainable */
.btn-primary {
  background: #9333ea;
  color: white;
}

.card .title {
  font-size: 1.5rem;
}

/* ❌ Avoid - Too specific */
div.container > section.main > article.post > h2.title {
  color: #9333ea;
}

/* ❌ Avoid - Over-qualified */
div#header div.container ul.nav li.item a.link {
  text-decoration: none;
}

📝 Penjelasan Detail:

â€ĸ Keep it simple - gunakan selector sesederhana mungkin
â€ĸ Avoid deep nesting - maksimal 3 level untuk maintainability
â€ĸ Use meaningful names - class names harus deskriptif
â€ĸ Follow BEM methodology - Block__Element--Modifier pattern
â€ĸ Performance matters - ID dan class selectors paling cepat