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