Why doesn’t this a:visited css style work?

by

Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.

Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren’t visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element’s width changes so browsers that would allow changing font-weight for :visited links wouldn’t actually fix the security hole.

You can see there are some specific things browsers do to protect against this:

  • The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
  • If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
  • In rare scenarios, if you’re using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.

Thus, there’s no workaround for this issue.

More Related Contents:

  1. Make a div into a link
  2. How to use ‘hover’ in CSS
  3. Pure CSS scroll animation
  4. Google chrome a:visited background image not working
  5. Element not located at bottom of viewport
  6. How to get div height to auto-adjust to background size?
  7. How to make button look like a link?
  8. Making an iframe responsive
  9. Child with max-height: 100% overflows parent
  10. Internet Explorer’s CSS rules limits
  11. Pure CSS checkbox image replacement
  12. CSS: Set a background color which is 50% of the width of the window
  13. Does element width include padding?
  14. Add line break to ::after or ::before pseudo-element content
  15. Cols, colgroups and css “:hover” pseudoclass
  16. Why does the linear-gradient disappear when I make an element position:absolute?
  17. Usage of display property of flex box items
  18. Disable zoom on a div, but allow zoom on the page (an alternate div)
  19. CSS Selector for
  20. bootstrap button shows blue outline when clicked
  21. How to Decrease Image Brightness in CSS
  22. Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
  23. Is CSS Turing complete?
  24. Maintain div aspect ratio according to height
  25. display:block inside display:inline
  26. Does Internet Explorer support CSS transitions?
  27. 3d transforms on SVG element
  28. Define an ‘s src attribute in CSS [duplicate]
  29. HTML5 image icon to input placeholder
  30. Thymeleaf + CSS+SpringBoot

Leave a Comment