Css selector for a > strong

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

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

This should work:

.hrefspan a:hover, strong {
text-decoration: none;}

<span class="hrefspan"><a>...</a></span>

By putting it in a span and applying the css only to the content of that span it will not affect other href's or strong's.

use

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

since you have define rule strong a:hover indicates rules to be applied to the a tag which is present inside strong html tag

So the bit you actually want to change is the underling of the anchor

a:hover { text-decoration:none; }

If you want to have this only affect particular links on the page then apply classes to them.

<a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a>

a.notunderlined:hover { text-decoration:none; }