Mastering CSS3 Selectors and Specificity for Precise Styling

Intermediate

🎯 CSS3 Selectors & Specificity

Selectors determine which HTML elements are targeted by CSS rules.
CSS3 expands selector capabilities for precise styling and advanced targeting.

🧾 CSS3 Selector Examples

/* 🔍 Attribute Selector */
input[type='text'] {
  border: 1px solid #ccc;
}

/* 🎯 Pseudo-class */
a:hover {
  color: red;
}

/* 🎭 Pseudo-element */
p::before {
  content: "👉 ";
}

🧠 Understanding Specificity

When multiple rules apply, specificity determines which one takes precedence.

| Selector Type                      | Specificity Value |
|------------------------------------|-------------------|
| Inline styles                      | 1000              |
| ID selectors (`#id`)               | 100               |
| Class, attribute, pseudo-class     | 10                |
| Element, pseudo-element selectors  | 1                 |

📐 Best Practices

  • 🎯 Use clear, structured selectors
  • 🧼 Avoid over-specificity to keep CSS maintainable
  • 🛠️ Use developer tools to debug specificity conflicts

Mastering selectors and specificity is key to writing predictable, scalable, and efficient CSS3 styles.