CSS Specificity

CSS specificity is a set of rules used to determine which styles are applied to an element when multiple conflicting styles are defined. It's crucial to understand specificity to ensure that your styles are applied as expected. Specificity is calculated based on the following criteria, in order of importance:

Inline Styles: Styles defined directly on an HTML element using the style attribute have the highest specificity.

<div style="color: red;">This text is red.</div>        

ID Selectors: Selectors containing an ID have higher specificity than class selectors or element selectors.

#unique-element {
    color: blue;
}        

Class Selectors, Attribute Selectors, and Pseudo-Classes: Selectors containing classes, attributes, or pseudo-classes have higher specificity than element selectors.

.highlight {
    font-weight: bold;
}        

Element Selectors: Selectors targeting HTML elements directly have the lowest specificity.

p {
    font-style: italic;
}        

When multiple styles conflict, the browser applies the style with the highest specificity. If two conflicting styles have the same specificity, the one defined later in the stylesheet or HTML document takes precedence (due to the concept of the cascade).

To calculate specificity, you can assign values to each part of a CSS selector:

• Inline styles: 1000
• ID selectors: 100
• Class selectors, attribute selectors, and pseudo-classes: 10
• Element selectors: 1

For example:

• #header .nav li.active:ID selector (header): (100)Class selector: (nav) (10)Element selector (li): (1)Class selector: (active) (10)Total: 121
• div .nav li.active:Element selector (div): (1)Class selector: (nav) (10)Element selector (li): (1)Class selector: (active) (10)Total: 22

So, #header .nav li.active would override div .nav li.active because its specificity (111) is higher. However, if they were both defined with the same specificity, the last one declared would take precedence.

Here's a quick example to illustrate how specificity affects style application:

<div id="unique-element" class="highlight" style="color: green;">This text is green.</div>        

In this case, the text will be green because inline styles have the highest specificity. If you remove the inline style, the text will be blue due to the ID selector. If you remove both the inline style and the ID selector, the text will be bold because of the class selector.

Note: Inline style gets a specificity value of 1000, and is always given the highest priority!

Note 2: There is one exception to this rule: if you use the !important rule, it will even override inline styles!