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.
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.
Why not :visited instead of a:visited for links?
TL;DR: At the time of writing, you are completely correct; there is no difference between a:visited
and :visited
. However, using a:visited
is best practice for future-proofing your code.
TL;DR EDIT: As of August 2016, the CSS4 Working Draft allows other tags to use :visited
. There is now a functional difference between a:visited
and :visited
! Beware.
For web development languages today, specifically HTML5 and CSS3, you are right: there is functionally no difference between a:visited
and :visited
. Now, please take this with caution: web standards, elements, and user interface protocols are ever-evolving, meaning that in the future, it is possible that a new tag compatible with :visited
may be introduced.
When :visited
was introduced in CSS, the W3C CSS1 spec said:
In CSS1, anchor pseudo-classes have no effect on elements other than 'a'. Therefore, the element type can be omitted from the selector:
a:link { color: red }
==:link { color: red }
HOWEVER, in the CSS2 spec, the behavior of the :visited
pseudo-class was not restricted to just a
tags:
The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to
a
elements with an "href" attribute.
This means that it is up to the document language and browser to determine which elements are compatible with :visited
. While the current industry standard states that for HTML, only a
elements with an href
attribute qualify, this may well change later down the line.
EDIT, August 2016: Looks like the CSS4 Working Draft has confirmed my suspicion; in the new spec, :visited
can be used for other "link-like" elements, namely <area>
and <link>
. The spec says:
The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any
<a>
,<area>
, or<link>
elements with an href attribute are hyperlinks.
So <a>
, <area>
, and <link>
are all treated as hyperlinks, and the spec says that :visited
applies to all hyperlinks. So as of CSS4, you'll be better off including the a
in a:visited
.
Why some properties does not work with a:visited?
Mozilla removed the ability to style most aspects of :visited
links for privacy reasons. I would assume the same is true of Chrome and others.
Cannot change the content of visited :before pseudo-elements
The allowed (= not ignored) CSS properties of visited links are color
, background-color
, border-*-color
, outline-color
and, column-rule-color
(more under certain circumstances).
This is to prevent history stealing attacks. See this article for further details.
So you can, technically, set a :before
pseudo class for :visited
links, but it will be ignored and appears as if the links are not visited. This is not a bug, it's a feature ;)
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
a:visited links not following CSS rules
I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.
Related Topics
Create a Beautiful Horizontal Line with CSS Only
Two Divs the Same Line, One Dynamic Width, One Fixed
How to Apply Vendor Prefixes to Inline Styles in Reactjs
Sass/Compass - Convert Hex, Rgb, or Named Color to Rgba
CSS Gradient Checkerboard Pattern
How to Generate a Box-Shadow That Follows the Shape of a Clip-Path Polygon
What CSS Selector Can Be Used to Select the First Div Within Another Div
Changing Border Color in Mat-Form-Field
Css: on Hover Show and Hide Different Div's at the Same Time
Disable CSS Animation on Pseudo Element Inherited from Parent
How to Include the Background-Cover Value in the Shorthand Background Property
Using Vim, How to Make CSS Rules into One Liners
Bootstrap 4: Hidden Visible Cols