CSS specificity is a fundamental concept in web development that determines which CSS rule applies to an element when multiple rules could apply. Here's a detailed explanation of the basic rules of CSS specificity:
1. Specificity Hierarchy
CSS specificity is based on a hierarchy of selector types. The specificity of a selector determines which style rules are applied to an element when conflicting rules are present. The hierarchy from highest to lowest specificity is as follows:
Inline styles: An inline style, added directly within an HTML tag using the style attribute, has the highest specificity. For example, <div style="color: red;"> directly applies styles to the element[1][2][3][4].
IDs: An ID selector, denoted with a # prefix, has the next highest specificity. For example, #navbar targets the element with the ID "navbar"[1][2][3][4].
Classes, attributes, and pseudo-classes: These selectors have equal specificity and are next in the hierarchy. Class selectors are denoted with a . prefix, attributes selectors use brackets like [type="text"], and pseudo-classes begin with a colon, such as :hover[1][2][3][4].
Elements and pseudo-elements: These have the lowest specificity. Element selectors target HTML tags directly like div, and pseudo-elements are used for styling specific parts of an element, indicated by ::, such as ::after[1][2][3][4].
2. Calculating Specificity
Specificity is calculated on a per-selector basis and can be thought of as a score or rank. When multiple selectors target the same element, the one with the highest specificity score is applied. Specificity can be visualized as a series of numbers:
