Why doesn't this a:visited css style work?
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 aselement.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.
CSS link border style not working on a:visited
border-style
is not something you can overide on the visited
pseudo-class
From MDN
Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used).
Also Privacy and the :visited selector
Why are certain CSS properties not applied to a:visited?
You're not doing anything wrong - it just doesn't work that way (anymore). Styling of :visited was used as a security hole, so browser manufacturers basically eliminated alternate styling for :visited except for a handful of properties (e.g. 'color', 'background-color')
See: http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
Does Chrome have issue with setting a:visited css properties?
Instead, use the following:
a {
background-color: white;
}
a:visited{
background-color: red;
}
For security reasons -- specifically, in order to prevent history sniffing -- Chrome limits very strictly what can be done using the :visited selector.
a:visited is not working on mozilla but works fine on IE
The visited
style has been removed from Firefox (and most other browsers) in recent versions due to a security issue with it.
The problem is that a malicious web site could work out your browsing history by using it - they would set a visited
colour, produce a load of URLs (even hidden ones so the user doesn't know about it), and check their colour. It caused quite a bit of noise in browser security circles a couple of years ago.
The visited
feature can be switched back on again in Firefox, by going to the security preferences, but it is disabled by default, and most users will have it switched off.
See here for more info on the problem and how Firefox went about fixing it: http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
Chrome doesn't respect a color when link is visited
If you're having issues with the visited color being overwritten by the browser defaults, are you able to instead set all to unset?
#popup {
all: initial;
}
#popup * {
all: unset;
display: block;
}
After looking around, not 100% sure why the browser color was overriding the visited anchor, even testing #popup * {color: initial;}
rule worked, so I'm not sure what underlying mechanism is changing the text color. But looking over at the answer provided here https://stackoverflow.com/a/15903168/1440950 using unset clears the values as desired
Related Topics
Css Text-Decoration Property Cannot Be Overridden by Child Element
Text Blended Over Background Color
What Is the Best CSS Framework and Are They Worth the Effort
How to Automatically Crop and Center an Image
How to Change the Height of an Image in CSS :Before/:After Pseudo-Elements
What Is Difference Between Justify-Self, Justify-Items and Justify-Content in CSS Grid
How to Change the Bootstrap 4 Navbar Button Icon Color
Difference Between :First-Child and :First-Of-Type
How to Scale an Image in a CSS Sprite
How to Change the Bootstrap Primary Color
What Does the Forward Slash Mean in the CSS Font Shorthand
Position Element Fixed Vertically, Absolute Horizontally
Handling a Colon in an Element Id in a CSS Selector