CODEWITHSUNDEEP
csscss-specificity
Matilda Yi Pan
Matilda Yi Pan

Reputation: 658

CSS difference bwteen Pseudo-classes and Pseudo-elements in specificity calculation ?

I learned how to calculate css specificity based on http://reference.sitepoint.com/css/specificity However, based on this reference, I don't understand what is the difference between Pseudo-classes (from c) and Pseudo-elements (from d)?

For example, 

input[type="text"]:hover

hover is Pseudo-classes (from c) or Pseudo-elements (from d)?

compared with input[type="text"].error, which one has a higher specificity?

Upvotes: 0

Views: 182

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

The page cited says the same as CSS specifications such as CSS3 Selectors, section 9. Calculating a selector's specificity, though in less detail and non-authoritatively. The key point is that in specificity, pseudo-class selectors are treated like class selectors and pseudo-element selectors like type selectors (tag names). This means that a pseudo-class selector is more specific than a pseudo-element selector. The idea behind this is that classes (and pseudo-classes) refer to elements in a more specific way, like “Cadillac” (a class of cars, so to say) is more specific than “car” (a type of things, so to say).

Regarding :hover, whar matters is how it is specified in CSS specs. It so happens that it is a pseudo-class selector. This is natural, since it refers to an element that is in a specific state, so it can be characterized as a “dynamic class”.

Thus, input[type="text"]:hover and input[type="text"].error have equal specificity.

Upvotes: 0

Danield
Danield

Reputation: 125473

Pseudo classes (c) have a specificity of 10

Pseudo elements (d) has a specificity of 1

Both

input[type="text"]:hover and 

input[type="text"].error

have a specificity of 21

input (element - 'd') = 1

[type="text"] (attribute - 'c') = 10

:hover (pseudo class - 'c') = 10

.error (class - 'c') = 10

There are also online specificity calculators available, such as this one.

Upvotes: 1

Related Questions