How can I style a anchor tag so that once the link is visited it will change to Red and append [Old] to the end of the link.
So how do I combine these two:
a:visited{
color:Red
}
a:after{
content:[Old]
}
This is a privacy issue. As browser can detect element styles, it can therefore know what sites did you visit. An right now JS can detect it for a very large number of links in very short time. So for security reasons modern browser's ability to detect :visited class is severely cutted down.
Read more about it on mozilla's blog: http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/
Citation from Webkit changelog:
http://support.apple.com/kb/HT4196
Impact: A maliciously crafted website may be able to determine which
sites a user has visited
Description: A design issue exists in WebKit's handling of the CSS
:visited pseudo-class. A maliciously crafted website may be able to
determine which sites a user has visited. This update limits the
ability of web pages to style pages based on whether links are
visited.
Similiar questions (have more links):
Google chrome a:visited background image not working
How can I remove the underline of a link in chrome using CSS?
Related
The :not pseudo-class is used to append an svg icon to all linked elements in a website which link to external sites. I need help disabling the :not pseudo-class declaration on linked social icons generated by a page builder.
The website is comprised of my own HTML, CSS and script for the homepage and the rest of the website is generated by Elementor; a WordPress page builder. The page builder is configured to use my style.css file which contains the :not pseudo-class implementation and I can target whatever the page builder generates using script.
The page builder generates the HTML and CSS for linked social icons. When the page is constructed in the browser the :not pseudo-class appends the svg icon to the linked social icons generated by the page builder and the social icons are visually mangled by the appended svg icon.
Everybody knows Facebook and LinkedIn are external sites and the social icon links do not need the svg iconography which I've been unable to disable hence coming here for help.
I can successfully target the social icons in the page using my CSS and/or my jQuery but the CSS and jQuery I have tried has been unsuccessful to selectivley disable the :not pseudo class.
I have used !important which causes the social icon(s) to disappear in the page.
I have tried to use another transparent svg icon to replace the external link icon but that has not worked out likely because I may be using incorrect CSS.
I've searched stackoverflow and read similar questions as well as having searched the WWW and have not discovered a way to selectively apply the CSS :not pseudo-class declaration.
Noting the proxy href values this snippet is the functioning :not pseudo-class as declared in my style.css file:
/* functional as expected */
a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]) {
background: transparent url(assets/svg/layout/svg_link-external-11px.svg) no-repeat center right;
padding-right: 16px; }
CSS and the use of attribute selectors can change properties of the social icons but all iterations I have tried have been unsuccessful when attempting to disable or hack the display of the svg icon out of existence:
/* non-functional */
li.eael-team-member-social-link > a[href ^="https://facebook.com"] {
background: none; }
// non-functional
$( "li.eael-team-member-social-link > a[href ^='https://facebook.com']" ).css( "background", "none" );
Can the :not pseudo-class be selectively disabled such that it need not affect the social icons generated by the page builder while still serving its purpose to indicate links in the page go to external websites? If so how?
Sometimes I (we) overthink a problem and the solution is staring me (us) in the face. I realized that this afternoon and now provide an answer to my own question.
The :not pseudo-class supports chaining as my snippet example above shows so what I realized is all one needs to do to prevent the external icons from being appended to social icons linking to external sites (or any other external site) is add those TLDs to the chain as follows:
a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]):not([href *="facebook.com"]):not([href *="linkedin.com"])
NOTE: I googled and checked the FAQ about marking my own answer to my own question. When my answer was submitted a notification told me I can return tomorrow to mark it as a correct answer. Which I will do.
I am writing some CSS that should create some generated content.
.foo:visited::after {
display: inline;
content: " visited";
}
However, it has no effect.
If I change the selector to just .foo::after, it works.
Similarly, my styles for .foo:visited take effect.
The Safari web inspector is even showing my styles for :visited::after as if they are in effect!
Why can’t I see my generated content?
Browsers limit the styles you are allowed to modify on a visited link, and even lie to you if you query for the current color of the link with JavaScript.
Why?
Because otherwise, you, at scumbag-advertising.example.com, can run a bunch of JavaScript to see what websites (or at least URLs) are in the browser’s history!
For more, see :visited on MDN and this longer explanation of how this privacy hole was closed:
Historically, the CSS :visited selector has been a way for sites to query the user's history, by using getComputedStyle() or other techniques to walk through the user's history to figure out what sites the user has visited. This can be done quickly, and makes it possible not only to determine where the user has been on the web, but can also be used to guess a lot of information about a user's identity.
A number of years ago, browsers patched up this hole by limiting changes and lying about color.
I am having a problem with IE 8 where the visited links color do not change in our application.
We don’t have this problem with IE6.
When using IE6, visited links changes its color if the link has been viewed before.
Our application works fine with IE6 but with IE8 the visited link do not changes its color.
For information,
I have cleared the history , unchecked the option "use Windows Colors" in the browser option. But the links in our application always remain unvisited.
Here is the CSS:
a:link {
color : #006000;
}
a:visited {
color : #3CB371;
}
Any help and suggestions would be greatly appreciated.
There is a security issue with the :visited style.
To describe it briefly, it is possible for a malicious site to find out what sites you've visited by having links to all the sites it wants to check for, and then just examining the colours of those links.
This issue got a lot of publicity about three years ago, and as a result IE and all the other browsers released patches that disabled the :visited style.
I couldn't find a link that was specific to IE, but here's a link from Mozilla describing the problem and their solution for it in Firefox.
Older browsers (IE6, IE7) will still support the :visited style, but IE8 and all other current browsers do not.
Some of them do support it as a user-configurable option, but defaulting to switched off, but very few users will have switched it on, so you can basically ignore that.
More recently, some browsers have re-enabled the style, but changed the Javascript getComputedStyle() function so that it ignores the visited style. This allows the end user to see the visited colour but prevents the potential for a hacker to find out the information. I don't think IE8 ever got this update.
For example, an anchor tag, if not explicitly given a style, already has a style. It is blue, it goes purple when visited, and changes the cursor on hover.
Where does Chrome load these styles from?
Is there a Google Chrome style-sheet on my computer, or accessed by chrome through a rel link that has entries like :
...
a.visited {
color:purple; /* just because */
}
a.hover {
cursor:pointer;
}
... /* dozens of other CSS styles */
Where can I find this Google Chrome style-sheet file, or online resource?
Ideally, something like : chrome://internals/styles
Or something like : http://cdn.google.com/chrome/html.css
All browsers have a user agent stylesheet. This is essentially the default styles that they decide to apply, there are no requirements or official standards, though browsers will always try to behave as you would expect (blue hyperlinks, purple once clicked, etc).
The webkit one can be found here
Other browsers can be found here
When you inspect element you will notice certain styles. For example, Inspect any element on a webpage then click the <head> tag. You will notice the following:
A head is just like any other element so it would normally appear on your web page. Obviously this isn't what developers want, and they certainly don't want to have to hide the head in every stylesheet so the user agent does it for them, as default.
Take a look at these two links.
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Browsers' default CSS for HTML elements
They should help you out a little.
I have created a link and when I try to set the style;
a:visited {
text-decoration: underline;
color: #FF0000;
}
It doesnt seem to work. It works fine in IE. I have also followed the order; link, visited, hover, active.
Is this a known issue, or am I making any mistake?
It might have to do with specificity and the order that you have your selectors in. In general, when specifying link states, you should follow the "love/hate" principal:
:link
:visited
:hover
:active
Maybe you have the :hover or :active selector before :visited?
Download the Firebug or WebDeveloper plugin for Firefox and use it to examine the style of the link, say using Inspect, to see where the style is being set. You should be able to see what styles are being applied and from where.
i have heard it is to do with the security - so something under the firefox hood disables visited links from showing so that other software cannot inspect the active styles and figure out where a user has been.
that does sort of make sense, but they should make it an option, and they should also EXPLAIN TO PEOPLE THAT THAT IS WHAT THEY HAVE DONE and save us all some time.....
Go to Tools -> Options and check if Firefox is remembering your browsing history. If this option is unchecked then the browser cannot show you which links you have visited because you denied the browser that information, hence the reason why your visited links do not change color.
Because of security issues that Google/Bing/etc. will be glad to tell you about, only a short list of properties can be styled with the :visited pseudoclass. Text-decoration isn't one of them, though color ought to work.
Depending on what IE version the OP was using when s/he posted this question, the issue there may be incompatibility of IE, especially before IE8, with standards and with other browsers.
More information here (among other places): https://www.w3schools.com/cssref/sel_visited.asp
It's likely being overridden by another style. If you have the Web Developer toolbar installed you can see what CSS styles are in affect and where they came from by selecting "View style Information" from the CSS menu.