1

I am learning the specificity of CSS selectors and come across the following examples. I could not figure it out, which CSS selector has higher specificity on another?

1. Example:

p#largetext
body p#largetex

2. Example:

p.largetext ul li       
p ul li a

How the specificity of CSS works one over another? Why one is higher and one is lower?

Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
  • 1
    I like how [this article](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#how-to-measure-specificity) breaks it down. – chinaowl Jan 21 '16 at 19:17
  • 2
    [Here](https://specificity.keegan.st/) is a calculator you can use to get a breakdown of specificity between two different selectors. In addition, [here](http://vanseodesign.com/css/css-specificity-inheritance-cascaade/) is a great resource for learning how specificity is calculated by the CSS engine. – War10ck Jan 21 '16 at 19:17
  • 1
    In your first example, the one with `body` would take precedence. I think it's because it's the most specifically typed. The second example would represent invalid HTML. – Drew Kennedy Jan 21 '16 at 19:19

3 Answers3

5

Your question is answered by the CSS3 selectors, W3C Recommendation:

9. Calculating a selector's specificity

A selector's specificity is calculated as follows:

  • count the number of ID selectors in the selector (= a)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
  • count the number of type selectors and pseudo-elements in the selector (= c)
  • ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

With your examples we have:

1) p#largetext has a specificity of 1,0,1 (1 id, 1 type)

body p#largetex has a specificity of 1,0,2 (1 id, 2 types)

2) p.largetext ul li has a specificity of 0,1,3 (1 class, 3 types)

p ul li a has a specificity of 0,0,4 (4 types)

To obtain the value of the specificity you have to concatenate the 3 numbers. So for example 1, the second selector is more specific 102>101 and for example 2, the first selector is more specific 13>4.

Ortomala Lokni
  • 56,620
  • 24
  • 188
  • 240
1

In your first example, the second line would take priority over the first since it's more specific. Your second example is actually targeting two different elements, so depending on what you wanted, it would do two different things. If two rules share the same priority, then it would depend on the ordering of the rules themselves.

You can view a complete breakdown on MDN: Specificity - CSS | MDN

michael
  • 748
  • 4
  • 10
1

The specificity is a weight calculated based on the selector. Below is the list from the more specific to the less specific elements.

  1. !important
  2. inline declaration
  3. ID selectors
  4. Class selector, attribute selectors eg:[name="email"], or pseudo-clases eg: (:hover)
  5. Type selector eg: div, h2, img

If the specificity of two selectors is the same, the latets rule will be applied.

Ricardo Campos
  • 234
  • 2
  • 7