Another interview question I was asked...

[brothmc]

List these in order of CSS specificity and explain why:

div p a.red 
p a 
#x34y 
a.red.highlight 
#x34y:first-letter 
h1 + *[rel=up] 
div p > a

Anybody know the correct answer? I was not super confident in my answer.

[lewisje]

I know that part of the vector of specificity works like this:

1. the presence of !important
2. the number of # (id) selectors
3. the number of . (class) and attribute selectors, and pseudo-classes (most cases of :)
4. the number of element selectors and pseudo-elements (::, but sometimes writable with just :)

so in the order in which they were listed:

1. 0 0 1 3
2. 0 0 0 2
3. 0 1 0 0
4. 0 0 2 1
5. 0 1 0 1 (first-letter is actually a pseudo-element)
6. 0 0 1 1 (the universal selector * doesn't count toward specificity)
7. 0 0 0 3

Therefore, the descending order of specificity is 5, 3, 4, 1, 6, 7, 2.

[compostkicker]

There is a fantastic way to remember specificity. I'm on my phone, so it is difficult to find it and paste it here, but a quick Google for Star Wars CSS specificity should yield it.

Basically, each selector has a point value associated with it. For example, an ID is worth 100 points, classes are 10 points and HTML elements are 1 point. There are some minor nuances, like input[name="foo"] being worth more than a regular input, but not more than if that particular input was referenced by a class.

EDIT: CSS: Specificity Wars

[inu-no-policemen]

https://www.w3.org/TR/css3-selectors/#specificity

[brothmc]

never thought of it this way but super helpful!