CSS Specificity

css specificity is a set of rules that determine which styles are applied when multiple rules target the same element it helps resolve conflicts between competing styles how specificity works specificity is calculated based on the types of selectors used in a css rule each type has a weight, and the higher the specificity, the more precedence a rule has specificity calculation css assigns values based on selector types inline styles (style="") → highest specificity example \<div style="color red;"> specificity 1000 id selectors (#id) → high specificity example #myid { color blue; } specificity 100 class, attribute, and pseudo class selectors ( class, \[attr], \ hover) → medium specificity examples myclass { color green; } \[type="text"] { color black; } \ hover { color orange; } specificity 10 element and pseudo element selectors (div, h1, before) → lowest specificity examples p { color yellow; } before { content "hello"; } specificity 1 specificity examples p { color blue; } → specificity 1 text { color red; } → specificity 10 (class selector is stronger than element selector) #main { color green; } → specificity 100 (id is stronger than class) style="color black;" → specificity 1000 (inline styles override everything else) tiebreaker rules if two selectors have the same specificity, the latest rule in the css file wins !important overrides specificity but should be used sparingly best practices use specificity wisely to avoid unnecessary complexity prefer classes over ids for reusability avoid overusing !important, as it makes debugging difficult