CSS - Specificity

Inline styles

Inline styles, which are applied directly to an element using the style attribute, have the highest specificity. They take precedence over any other styles defined in external stylesheets or <style> tags.

<p style="color: red;">This text will be red.</p>

IDs

ID selectors, which target a specific element with a unique ID, have the second-highest specificity. An ID selector is defined using the # symbol followed by the ID name.

#unique-element {
  background-color: yellow;
}

Classes, attributes, and pseudo-classes

Class selectors, attribute selectors, and pseudo-classes have the third-highest specificity. They are more specific than element selectors but less specific than IDs.

.class-name {
  font-weight: bold;
}

[type="text"] {
  border: 1px solid black;
}

a:hover {
  text-decoration: underline;
}

Elements and pseudo-elements

Element selectors and pseudo-elements have the lowest specificity. They target elements based on their tag name or a pseudo-element.

p {
  font-size: 16px;
}

h1::before {
  content: "* ";
}

When multiple selectors target the same element, the browser applies the styles according to the specificity hierarchy. Inline styles take precedence over IDs, which take precedence over classes, attributes, and pseudo-classes, which in turn take precedence over elements and pseudo-elements.

Specificity weight values

The specificity of a selector is calculated using four components, each with a different weight value:

The specificity value of a selector is the sum of its weight values for each component.

How to calculate the specificity of a selector

To calculate the specificity of a selector, follow these steps:

1. Count the number of inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements in the selector.
2. Multiply each count by its corresponding weight value.
3. Sum up the weighted counts to get the final specificity value.

The selector with the highest specificity value takes precedence over others.

Examples of specificity calculations

p {
  color: black;
}

.text {
  color: blue;
}

#unique-id {
  color: green;
}

p.text {
  color: red;
}

<p class="text" style="color: orange;">Hello, world!</p>

#unique-id {
  color: green;
}

p.text {
  color: red;
}

Equal specificity: the latest rule counts

When two selectors have the same specificity, the one that appears later in the stylesheet takes precedence. This is because CSS cascades from top to bottom, and the last rule encountered overrides previous ones with equal specificity.

p {
  color: black;
}

/* This rule will override the previous one */
p {
  color: blue;
}

ID selectors have a higher specificity than attribute selectors

ID selectors are more specific than attribute selectors. This means that if an element is targeted by both an ID selector and an attribute selector, the styles defined by the ID selector will be applied.

#unique-element {
  background-color: yellow;
}

[id="unique-element"] {
  background-color: green;
}

The element with the ID "unique-element" will have a yellow background because the ID selector has higher specificity.

Contextual selectors are more specific than a single element selector

Contextual selectors, which target elements based on their relationship to other elements, have a higher specificity than a single element selector.

div {
  font-size: 16px;
}

div p {
  font-size: 14px;
}

Paragraphs inside a <div> will have a font size of 14px, while other <div> elements will have a font size of 16px.

The universal selector has low specificity

The universal selector (*), which targets all elements, has a very low specificity. It has a specificity value of (0, 0, 0, 0), which means that any other selector will override its styles.

* {
  margin: 0;
  padding: 0;
}

p {
  margin: 10px;
}

All paragraphs will have a margin of 10px, overriding the universal selector's margin of 0.

Inherited values have low specificity

Inherited values, which are passed down from parent elements to their children, have a specificity value of (0, 0, 0, 0). This means that any directly applied style will override an inherited value.

body {
  color: black;
}

p {
  color: blue;
}

Paragraphs will have a color of blue, overriding the inherited black color from the <body> element.

How !important overrides other specificity values

When you add !important to a style declaration, it overrides any other conflicting styles for that property, even if the conflicting selector has a higher specificity value.

#unique-element {
  background-color: yellow;
}

.class-name {
  background-color: blue !important;
}

The element with the ID #unique-element will have a blue background, despite the ID selector having a higher specificity than the class selector. This is because the !important declaration overrides the specificity hierarchy.

When to use !important

While !important can be useful in certain situations, it should be used sparingly, as it can make your CSS harder to maintain and debug. Here are a few cases where using !important might be justified: