-1

Consider the following

.pr a { color: green; }
a:link { color: red; }
<p class="pr">
    Welcome, please <a href="#">login</a>
</p>

On what rule does the above code follow such that the link gets the red color?

From the style resolution enter image description here

From the above code

  • Both are author styles i.e same origin
  • None is !important
  • None is inline
  • Selector specificity (Here)

I used number of (id's, classes, tags) notation

.pr a -> (0,1,1)

a:link -> (0,0,1)

So from my understanding .pr a should have won. What am i getting wrong?

Emmanuel Mtali
  • 4,383
  • 3
  • 27
  • 53

1 Answers1

1

You missed the :link pseudo-class — that carries equal specificity with class selectors. So the two selectors are equally specific at (0, 1, 1), and a:link wins because it comes later in the CSS source order.

However should you click the link and cause it to be visited, the :link pseudo will no longer match altogether, leaving .pr a the only rule to apply and turning the link green.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • I think something is going on here. The rule that :link has equal specificity with class selector holds as long as the link is not visited, after the link has been visited :link promoted to a lower priority and .pr a wins – Emmanuel Mtali Apr 06 '21 at 14:29
  • @Emmanuel Mtali: Yeah, visiting the link would be the only way to reproduce it. But that requires interacting with the snippet. You can't reproduce the behavior just by running it and leaving it alone. You think j08691 might have clicked on the link by accident while viewing the snippet? – BoltClock Apr 06 '21 at 14:31
  • The browser in non-incognito remembers so j08691 might have visited the link in he past – Emmanuel Mtali Apr 06 '21 at 14:51
  • @Emmanuel Mtali: Hmm, fair enough. I must admit I haven't paid attention to how visited # links work within the snippet iframe. – BoltClock Apr 06 '21 at 14:52
  • So why do you think rules change after visiting a link? – Emmanuel Mtali Apr 06 '21 at 14:57
  • @Emmanuel Mtali: You were pretty close, but it's not that :link's priority is reduced but that it stops matching entirely. The entire color: red rule stops applying. – BoltClock Apr 06 '21 at 14:59