Menu
To my understanding, the CSS specificity rules indicate that a pseudo class has the same weight as a tag selector. So a selector like "div p a" would be more specific than "a:link".
But as the following test case demonstrates, that does not seem to be the case. Why is the link red?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css" media="screen">
a:link { color: red; }
div p a { color: green; }
div.foobar p a { color: green; }
</style>
</head>
<body>
<div>
<p>
<a href="http://somecrazyurlwierdthing.com">A link... why is it red?</a>
</p>
</div>
<div class="foobar">
<p>
<a href="http://somecrazyurlwierdthing.com">But it turns green when you add a class selector.</a>
</p>
</div>
</body>
</html>
Edited the example to include the "div.foobar p a" selector.
943
As a special case for increasing specificity, you can duplicate weights from the CLASS or ID columns. Duplicating id, class, pseudo-class or attribute selectors within a compound selector will increase specificity when overriding very specific selectors over which you have no control.
The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited <a> or <area> element that has an href attribute.
Rule 3: Inline CSS has the highest specificity. Inline CSS is the closest to the HTML element, so it is more specific and is therefore applied.
A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it. Style visited and unvisited links differently.
The specification you link to states that a pseudo-class (:link in this case) has higher specificity than an element name. To be precise, using the a-b-c-d format, your three selectors come out as:
a-b-c-d
0 0 1 1
0 0 0 3
0 0 1 3
Your confusion possible comes from your use of the term "pseudo selector" which fails to recognise the distinction between pseudo-classes such as :link and pseudo-elements such as :first-line.
78
The thing is :link isn't a pseudo-element like :first-line, it's a pseudo-class and thus counts as a class for the specificity.
Source
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
