CSS Specificity – Advanced CSS Selectors – Part 2

Understanding CSS specificity will help you understand how rules are applied to the elements on your page and allow you greater control over how your page is styled.

Contents

  1. Getting Specific
  2. Calculating Specificity
  3. Rules for Creating Specific Selectors
  4. Final Words
  5. References

Getting Specific

You’ve seen that you can apply multiple styles to an HTML element like this:

And you can create individual styles for various elements on the page:

A number of rules style the same CSS properties – background-color and color – and final result depends on:

  1. the priority (or significance) of the selectors
  2. for selectors with the same priority, the last defined property takes priority.

Which means that the final style rule looks like this

This can seem haphazard and you might like to have better control over your CSS style rules – especially if later declarations can override earlier declarations.

We can overcome this by being more specific with our styling rules:

We can get even more specific with the following:

However, if you created the following rule:

And you applied it to the following code:

You would find that the styles of #first would take priority over the styles in p.important despite p.important appearing to be more specific – after all, it specifies two selectors (<element> and .class) over the single ID selector.

This is because the significance of a rule depends on the specificity of the selector. CSS specificity is calculated using a few straightforward rules.

Calculating Specificity

Specificity is calculated as a string of three values1. Many resources and tutorials show it as a single number like 000 or 130. Some tutorials show it in the form 0-0-0 or 1-3-0 – which is a better representation. I will use the following representation: 0:0:0 or 1:3:0.

The specificity number indicates the total counts of various basic selectors. The universal selector always has a specificity of 0:0:0 – so any selector with a higher specificity will trump it. As with normal numbers, the leftmost digits are more significant than the rightmost digits. Consider the ranking of the following specificities:

  • 0:0:1 > 0:0:0
  • 0:2:0 > 0:1:0
  • 0:2:1 > 0:1:6
  • 0:2:5 > 0:2:4
  • 1:2:3 > 0:12:7

The specificity number is calculated as the total number of CSS specifiers used for that style rule. The totals are arranged in the following manner:

IDs .classes and [attributes] <elements>

Consider the specificity of the following selectors:

In each case, you simply add up the total number of basic selectors, put them in the correct location and compare.

Rules for Creating Specific Selectors

  1. If you specify an HTML element, then it must be at the beginning of the selector. i.e.: p[attribute] not [attribute]p.
  2. There can be a maximum of 1 HTML element in a specific selector. i.e.: p.class or ul[reversed], but not pspan.class.
  3. There can be a maximum of 1 #ID in a selector. This is because an element can have at most 1 #ID.
  4. The order of .class, [attribute], or #ID doesn’t matter. i.e.: #ID.class is equivalent to .class#ID.
  5. .class, [attribute], and #ID selectors may be repeated to increase their specificity. i.e.: .class has a specificity of 0:1:0, but .class.class has a specificity of 0:2:0.
  6. You cannot repeat HTML elements. i.e.: pppp or ulul have no meaning and will be ignored by the browser.
  7. All selectors are written together without spaces between them. i.e.: p.class is not the same as p .class and #id[attribute] is not the same as #id [attribute].2

Final Words

  1. You can be very specific about which HTML element to style on a page by stringing together various selectors associated with that element:

  2. Specificity is calculated by summing and arranging the total number of basic specifiers in each of the following groups:
    IDs .classes and [attributes] <elements>
  3. In deciding which styling rule to apply, the rule with the higher specificity is applied.
  4. If two rules have the same specificity then the last rule defined is applied.
  5. The universal selector always has a specificity of 0:0:0.
  6. There are no spaces between the selectors – it is written as one long expression.

References

  1. CSS Selectors

  1. For now it is three values, in reality there two more values that have higher specificity and can be considered as the fourth and fifth specificity values – they will be covered in a future tutorial.

  2. The next tutorial will show how spaces between selectors changes the meaning of the selection expression.

Leave a Reply

Your email address will not be published. Required fields are marked *