How Does CSS Specificity Resolve Style Conflicts?

TL;DR

CSS resolves conflicting declarations through the cascade algorithm, which considers position and order, specificity, origin, and importance. Inline styles outrank ID, class or attribute, element, and universal selectors, while !important can override an inline declaration. When competing selectors have equal specificity, the declaration appearing later is applied.

Transcript

In today's video, I will tell you about specificity in CSS. Assume you have an element that has been styled in two ways through CSS. That is, we have used two types of selectors to style it. And both styles are saying two different things. Let's say one style is saying make the background color red. And the other style is saying make the background... Read More

Key Insights

• The cascade algorithm is CSS's method for determining which property value wins when multiple declarations assign conflicting values to the same element. The algorithm considers position and order of appearance, selector specificity, origin, and whether a declaration has been marked as important.
• Equal-specificity declarations are resolved by their order of appearance. When several rules use selectors of the same type and therefore have the same specificity, the rule placed later in the CSS wins, as demonstrated by reordering multiple class-based color declarations.
• Specificity is a calculated value that indicates which CSS selector is more specific. The tutorial presents inline styles as more specific than ID selectors, ID selectors as more specific than class or attribute selectors, and those selectors as more specific than element and universal selectors.
• Inline styles receive 1000 specificity points in the calculation described. A declaration written through an element's style attribute therefore takes priority over the ordinary element, class, attribute, and ID selector declarations discussed in the tutorial.
• ID selectors receive 100 specificity points, while classes, attribute selectors, and pseudo-classes receive 10 points each. The example attribute selector targets an element whose data-x attribute has the value a and gives that element a red background.
• Element selectors and pseudo-elements receive 1 specificity point, while the universal selector receives 0 points. These values place them below class, attribute, ID, and inline styling in the specificity hierarchy presented during the calculation walkthrough.
• Stylesheet origin affects the cascade because browsers provide a user agent stylesheet when authors have not supplied styles for an element. Author-written CSS can overwrite the browser's user agent styles, making the source of a declaration relevant to the winning result.
• An !important declaration can override an inline style in the demonstrated conflict. Adding !important to a class declaration makes that value win over the color set through the element's style attribute, although the tutorial recommends generally using less specific selectors for easier overriding.

Questions & Answers

Q: What is CSS specificity?

CSS specificity is a calculated value used to determine which selector is more specific when multiple CSS declarations conflict on the same element. The hierarchy presented gives the greatest ordinary priority to inline styles, followed by ID selectors, class or attribute selectors, element selectors, and the universal selector. The more specific competing selector supplies the winning property value.

Q: How does the CSS cascade resolve conflicting styles?

The CSS cascade resolves conflicting styles by determining which property value should win for an element. The tutorial identifies four considerations: position and order of appearance, specificity, origin, and importance. Equal-specificity rules are resolved by order, different selector types are compared through specificity, author CSS can override user agent styles, and !important can change the result.

Q: When does the last CSS declaration win?

The last declaration wins when competing rules have equal specificity. For example, if several rules target the same element through class selectors, their selector type and specificity are equal. CSS then uses position and order of appearance to resolve the conflict, applying the relevant declaration that occurs latest in the stylesheet, as shown by rearranging the color classes.

Q: How is CSS specificity calculated?

The calculation described assigns points according to selector type. A universal selector receives 0 points. An element selector or pseudo-element receives 1 point. A class, attribute selector, or pseudo-class receives 10 points. An ID selector receives 100 points, and an inline style receives 1000 points. These values are used to compare conflicting selectors.

Q: Which CSS selector has the highest specificity?

An inline style has the highest specificity among the ordinary styling methods discussed, receiving 1000 points. It outranks an ID selector at 100 points, a class or attribute selector at 10 points, an element selector at 1 point, and a universal selector at 0 points. However, the demonstrated !important declaration can override an inline style.

Q: What is an attribute selector in CSS?

An attribute selector targets an element according to an attribute and its value. The tutorial demonstrates an element with a data-x attribute whose value is a, then uses a selector for data-x equal to a to apply a red background. In the presented specificity calculation, an attribute selector receives 10 points, the same value as a class selector.

Q: What is a user agent stylesheet?

A user agent stylesheet is the browser's own stylesheet, which supplies styles when the author has not added CSS for an element. The tutorial shows these declarations in the browser's inspection tools and identifies their source as the user agent stylesheet. Author-written styles can overwrite them, illustrating why stylesheet origin is one consideration within the cascade algorithm.

Q: Why should CSS use less specific selectors when possible?

Less specific selectors are recommended because their declarations are easier to override later. A universal selector can be overridden with an element selector, an element selector with a class or attribute selector, and those selectors with an ID selector. Inline styling is harder to override through ordinary selectors, so starting with lower specificity leaves more flexibility for later changes.

Summary & Key Takeaways

• The cascade algorithm determines which conflicting CSS property value is applied to an element. Its four discussed considerations are position and order of appearance, selector specificity, stylesheet origin, and importance. If competing selectors have equal specificity, the declaration that appears later in the CSS becomes the winning property.

• Selector specificity reflects how precisely a selector targets an element. The stated priority runs from inline styles to ID selectors, class or attribute selectors, element selectors, and universal selectors. The tutorial recommends choosing less specific selectors when possible because their declarations are easier to override as a stylesheet develops.

• The tutorial assigns specificity points to selector types: 0 for the universal selector, 1 for an element selector or pseudo-element, 10 for a class, attribute selector, or pseudo-class, 100 for an ID selector, and 1000 for an inline style. An !important declaration can override an inline style.