Specificity
📌 Covered in this chapter:
Element · Class · ID · Inline · Specificity Calculation · Selector Weight · Specificity Wars · CSS Architecture · :where() · :is() · !important Problems · Refactoring
Welcome to Chapter 8: Specificity — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Specificity Ante Enti?
Specificity — selector strength score. Cascade lo specificity equal unna rules madhya source order decide chestundi; different specificity ayite higher score win avuthundi.
| Selector Type | Weight | Example |
|---|---|---|
| Inline style | 1,0,0,0 | style="..." |
| ID | 0,1,0,0 | #header |
| Class, attribute, pseudo-class | 0,0,1,0 | .btn, [type], :hover |
| Element, pseudo-element | 0,0,0,1 | p, ::before |
2Specificity Calculation
CSS — Specificity Examples
/* (0,0,0,1) — one element */
p { color: black; }
/* (0,0,1,0) — one class */
.text { color: blue; }
/* (0,1,0,0) — one ID */
#main { color: red; }
/* (0,1,1,1) — ID + class + element */
#main .title h1 { color: purple; }Compare left to right: First different column lo ekkuva number unna selector win avuthundi. #main p (0,1,0,1) beats .text (0,0,1,0).
3Avoiding Specificity Wars
Specificity wars — override cheyadaniki malli malli IDs and !important add cheyadam. Maintainability destroy avuthundi.
- Classes prefer cheyandi over IDs for styling
- Single-class selectors target cheyandi:
.nav-link--active - BEM naming — predictable, flat specificity
!importantlast resort matrame
4:where() & :is() — Specificity Control
/* :where() — zero specificity boost */
:where(h1, h2, h3) {
line-height: 1.2;
}
/* :is() — takes highest specificity of arguments */
:is(h1, .title, #hero) {
color: #1e293b;
}:where() reset/base styles ki perfect — override cheyadam easy. :is() grouping ki use cheyandi but specificity aware ga.
5Refactoring Complex Selectors
Before → After Refactor
nav.main-nav > ul > li.active > a → .nav-link--active
Lower specificity, reusable class, easier testing and maintenance.