How does CSS specificity rank inline styles, IDs, classes, attributes, and elements?

How does CSS specificity rank inline styles, IDs, classes, attributes, and elements?

• A. IDs have the highest specificity, surpassing inline styles.
• B. Elements have the highest specificity.
• C. Classes have the highest specificity.
• D. Inline styles have the highest specificity, followed by IDs, then classes/attributes/pseudo-classes, then elements/pseudo-elements.

Answer: (D)

Specificity determines which CSS rule wins when multiple rules target the same element. Inline styles are treated as the most specific, so a style set directly on the element will override any style declared in a stylesheet, as long as the competing rules aren’t equally specific and later in the cascade. After inline styles, an ID selector has higher specificity than any combination of classes, attributes, or pseudo-classes. Those three categories share the next level, so a selector with one or more classes, attributes, or pseudo-classes beats a plain element selector. Finally, element selectors and pseudo-elements have the lowest specificity, so they can be overridden by any of the higher levels. For example, if an element has an inline style like color: red, it will take precedence over a stylesheet rule like p { color: blue } or a rule using a class such as .highlight { color: green }. If two rules have the same specificity, the one declared later in the CSS wins.

Specificity determines which CSS rule wins when multiple rules target the same element. Inline styles are treated as the most specific, so a style set directly on the element will override any style declared in a stylesheet, as long as the competing rules aren’t equally specific and later in the cascade. After inline styles, an ID selector has higher specificity than any combination of classes, attributes, or pseudo-classes. Those three categories share the next level, so a selector with one or more classes, attributes, or pseudo-classes beats a plain element selector. Finally, element selectors and pseudo-elements have the lowest specificity, so they can be overridden by any of the higher levels.

For example, if an element has an inline style like color: red, it will take precedence over a stylesheet rule like p { color: blue } or a rule using a class such as .highlight { color: green }. If two rules have the same specificity, the one declared later in the CSS wins.