Learn the concept
CSS Selectors & Specificity
CSS selectors target HTML elements for styling. Specificity determines which rules win when multiple selectors match the same element. The hierarchy is: inline styles (1000) > ID selectors (100) > class/attribute/pseudo-class (10) > element/pseudo-element (1). !important overrides all specificity.
Common selectors:\n- .class — class selector\n- #id — ID selector\n- element — type selector (div, p, h1)\n- element.class — combined\n- parent > child — direct child\n- ancestor descendant — any descendant\n- a + b — adjacent sibling\n- a ~ b — general sibling\n- [attr="value"] — attribute selector\n- :hover, :focus, :first-child — pseudo-classes (e.g., :hover, :focus)\n- ::before, ::after — pseudo-elements (e.g., ::before, ::after)\n- :has() — selects elements based on their descendants (e.g., a:has(span))\n- :is(), :where() — functional pseudo-classes for grouping selectors and managing specificity (e.g., :is(h1, h2):hover)\n\nSpecificity calculation (a, b, c, d):\n- a: inline styles\n- b: ID selectors count\n- c: class, attribute, pseudo-class selectors count\n- d: element, pseudo-element selectors count\n\nRules:\n1. Higher specificity wins\n2. Equal specificity → last rule wins\n3. !important overrides everything (avoid it)\n4. Inherited styles have no specificity\n\nBest practices:\n- Keep selectors simple and flat to avoid "specificity wars."\n- Prefer classes for styling over IDs.
/* Specificity: (0, 0, 0, 1) — element */
p { color: black; }
/* Specificity: (0, 0, 1, 0) — class */
.text { color: blue; }
/* Specificity: (0, 0, 1, 1) — class + element */
p.text { color: green; }
/* Specificity: (0, 1, 0, 0) — ID */
#title { color: red; }
/* Specificity: (0, 1, 1, 1) — ID + class + element */
p#title.text { color: purple; }
/* Inline style: (1, 0, 0, 0) — highest */
/* <p style="color: orange"> */
/* !important — nuclear option, overrides all */
p { color: pink !important; }With specific styles for active links, hover states, and disabled items using pseudo-classes and class selectors.
By defining base styles with low specificity and then overriding them with higher specificity class-based selectors for components.
Where input fields change style (e.g., border color) when focused or when they contain invalid data, using attribute selectors and pseudo-classes.
Build a photo gallery where image overlays and captions appear using CSS selectors and pseudo-classes for interactive effects.
Create a blog layout with different themes that can be switched using class selectors, demonstrating specificity and selector power.
Google's Material Design system relies heavily on a well-structured and highly specific set of CSS selectors to ensure consistency and proper visual hierarchy across its vast array of products, from button states to complex card layouts.
The Bootstrap framework provides a comprehensive set of utility classes and component-specific selectors that allow developers to quickly style elements while managing specificity effectively to enable easy customization and overriding of default styles.