Search code examples
htmlcsscss-selectorscss-specificity

Specificity between not() and first-child selectors

So we have the following example about not() and p:first-child{} selectors.Here is the example:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child{
color: red;
}
p:not(a){
    color: green;
}
</style>
</head>
<body>

<p>This a paragraph.</p>

</body>
</html>

Why the paragraph is red at the end? Can somebody explain (if possible ) why the p:first-child{} has bigger specificity than not() selector???

Solution

  • Can somebody explain (if possible ) why the p:first-child{} has bigger specificity than not() selector?

    Because :not() doesn’t have any influence on specificity itself – only what is inside it counts in regard to specificity.

    So you have the element selector p and the pseudo class :first-child, which gives a specificity of 0-0-1-1 – and you have the element selectors p and a, which result in 0-0-0-2.