Css selector for a > strong

Question

I have a simple Css rule like so:

strong a:hover {
text-decoration: none;
}

This works for the following HTML:

<strong>
<a href="www.stackoverflow.com">Go to website</a>
</strong>

The problem is the Wysiwyg within the CMS i am using often puts the code in like so:

<a href="www.stackoverflow.com"><strong>Go to website</strong></a>

My css rule then doesnt work. Is there are pure Css solution?

Thanks Al

Answer 1

What you're trying to do isn't supported in CSS - you can't style the parent. A better approach here might be to add a class to the link:

<a href="http://www.stackoverflow.com" class="ImportantLink">Go to website</a>

CSS:

a.ImportantLink { font-weight:bold; }
a.ImportantLink:hover { text-decoration: none; }

That way the link can easily be styled. <strong> may be semantically wrong if you use it just to style the link, and not to emphasize the text (though, that might be less important, to be honest)

Working Example: http://jsbin.com/ekuza5