Search code examples
csscss-specificity

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?

Solution

  • 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.