How to Write A:Visited in Inline CSS

How to write a:visited in inline CSS?

First off, good luck! HTML email is stuck firmly at 1996 tech levels.


One thing to attempt if you don't actually need a separate "visited" colour is to add an !important on the span.

For example, your mail client may have something like this in their style sheet:

a:visited * { color: #000 !important; }

In which case that will override your inline style.

So, try changing your span to:

<a href="http://www.example.com" target="_blank">
<span style="color: #ffffff !important;" >ici</span>
</a>

to override it back again.

A quick test in Chrome shows that the a:visited * { ... !important} does override the inline style, but adding the !important back to the span works fine.


2017 Update

The CampaignMonitor CSS guide now seems to recommend using a <style> element in the head, rather than inlining all styles. Based on other answers this seems to provide the best compatibility with recent version of Outlook.

Is there any way to use inline styles to define a:visited link style?

You can't do this, the specification (CSS2 here) covers it briefly here:

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.

:visited along with the others modifiers are all pseudo-classes, and there was never a standard syntax setup to do what you're trying. Honestly this is the first time I've ever seen it requested, so I don't think it'll be added to the specification anytime soon...sorry that answer sucks, but it is what it is :)

How to assign a:hover, a:visited, etc. using the style attribute only

You can manage it with Javascript:

var links = document.getElementsByTagName("a");

for(var i = 0; i < links.length; i++) {
if(links[i].className == "hoverThis") {
DoHover(links[i]);
}
}

function DoHover(link_element){
link_element.onmouseover = function(){
this.style.display = "block";
}

link_element.onmouseout = function(){
this.style.display = "none";
}
}

Just add the appropriate class ("hoverThis" in this example) to the links elements you want the over effect on, and alter effect as needed.

How to write a:hover in inline CSS?

Short answer: you can't.

Long answer: you shouldn't.

Give it a class name or an id and use stylesheets to apply the style.

:hover is a pseudo-selector and, for CSS, only has meaning within the style sheet. There isn't any inline-style equivalent (as it isn't defining the selection criteria).

Response to the OP's comments:

See Totally Pwn CSS with Javascript for a good script on adding CSS rules dynamically. Also see Change style sheet for some of the theory on the subject.

Also, don't forget, you can add links to external stylesheets if that's an option. For example,

<script type="text/javascript">
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("href","http://wherever.com/yourstylesheet.css");
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
</script>

Caution: the above assumes there is a head section.

CSS - a:visited:hover?

Yes that is possible.

Here’s an example:

<style type="text/css">
a:link:hover {background-color:red}
a:visited:hover {background-color:blue}
</style>

<a href="http://www.google.com/">foo</a><a href="http://invalid/">bar</a>

Css Overwrite issue - Change the scope of external styles

Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this

.leftbar {
float: left;
width: 20%;
background: #ccc;
}

a { /*think of this as default link style*/
color: black;
}

#main div:not(.product-desc) a { /*more specific selector*/
display: block;
color: red;
}

a { /*this one is from eBay*/
color: green;
}
<div id='main'>
<div class='leftbar'>
<a>Hello</a>
<a>World</a>
</div>
<div class='product-desc'>
<a>Description</a>
<a>Product</a>
</div>
</div>

CSS styling links: why a:link, a:visited vs just a

If you only style a {...} then the style will be applied to all anchor elements including <a name="..."></a> elements, which define an anchor within the page, but do not reference a hyperlink.

a:link {...} specifically relates to hyperlinks. :visited, :hover and :active are different states of these links. Note that :hover and :active can apply to other elements as well.



Related Topics



Leave a reply



Submit