How to change font size in css visited?

Question

In my application I need to change the font size of the links that are visited. What I'm doing is

a:visited { 
    color: pink;
    font-size:12px;
}

But only the color is getting changed. Why is the font size not changing ?

@XzenTorXz did this fiddle work for you ? For me it is not working — I'm nidhin, Jul 14 '16 at 13:44
Have a look at this question, it gives a brief answer on precedence with CSS, http://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css — llanato, Jul 14 '16 at 13:45
@XzenTorXz The `!important` tag really won't help in this scenario as this has less to do with precedence and more to do with a limitation of `:visited` itself. — Rion Williams, Jul 14 '16 at 13:54
I apologize, I thought the first time that I had seen the fiddle that it had an `!important` tag. It may have been something else. My bad. :) — Rion Williams, Jul 14 '16 at 14:01

Rion Williams · Answer 1 · 2016-07-14T13:49:40.737

5

Limitations of :visited

The :visited pseudoselector has some limitations with regards to what properties it can target and sadly font-size isn't one of them :

Acceptable Properties

As seen above, the only acceptable styles that can be targeted are :

color
background-color
border-color
border-{bottom,left,right,top}-color
outline-color
column-rule-color

This is done for security/privacy reasons and isn't likely going to change any time soon. If you really had to implement this, you would likely need to resort to some Javascript to explicitly set the size on your visited tags.

edited Jul 14 '16 at 13:49

answered Jul 14 '16 at 13:43

Rion Williams

74,820
37
200
327

2

Better reference https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector – j08691 Jul 14 '16 at 13:49
Thanks for pointing that one out. I frequently use Mozilla's documentation as I find it reads well, but that one is solid and focuses on the exact issue (not to mention it's present in the image I linked to). +1 – Rion Williams Jul 14 '16 at 13:51

Anuj Kumar · Answer 2 · 2016-07-14T13:58:58.350

0

Browsers limits the styles that can be set for a:visited links, due to security issues.

Allowed styles are:

color
background-color
border-color (and border-color for separate sides)
outline color
column-rule-color
the color parts of fill and stroke

All other styles are inherited from a:link.

edited Jul 14 '16 at 13:58

answered Jul 14 '16 at 13:45

Anuj Kumar

136
6

You'd probably get upvotes if you nixed the w3schools reference and cited a reliable source. – j08691 Jul 14 '16 at 13:52
Thanks for advice.. Added the reference :) – Anuj Kumar Jul 14 '16 at 13:55
You misunderstood. I suggested that you get rid of the w3school reference and cite an authoritative source like the W3.org or MDN. – j08691 Jul 14 '16 at 13:55

score 0 · Answer 3 · answered Jul 14 '16 at 13:54

0

You can only change any color of visited (:visited) links but not the size. You can only change the size of a:link {font-size: 150%} of "NOT" visited links

answered Jul 14 '16 at 13:54

Denis

33
6

score -1 · Answer 4 · answered Jul 14 '16 at 13:58

-1

So all the other answers have established that this can not be done with pure CSS. So JavaScript to the rescue.

https://jsfiddle.net/dustinpoissant/708fwntf/

$(function(){
  $("a").each(function(index, link){
    var $link = $(link);
    console.log($link.css("color"));
    if($link.css("color") == "rgb(0, 0, 238)"){
      $link.addClass("visited");
    }
  })
});

a:visited { 
    color: pink;
}
a.visited {
  font-size: 26px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Test</a>

answered Jul 14 '16 at 13:58

Dustin Poissant

3,201
1
20
32

1

try to use a real href attribute: the page will be unloaded and the classname won't be applied (if the target is `_self` by default) - maybe you could instead save the information in the localstorage for each clicked link and load from there at every page load – Fabrizio Calderan Jul 14 '16 at 14:01
I do not know what you mean by "page will be unloaded" you can leave and come back and it works fine. And if you use localstorage you are assuming that the link was visited from this site whereas it could be visited from another site, then you come to this site and this example should still work. – Dustin Poissant Jul 14 '16 at 14:08

How to change font size in css visited?

4 Answers4

Linked

Related