Why Are Certain CSS Properties Not Applied to A:Visited

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 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.

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



Leave a reply



Submit