Css selector for> strong

Question

I have a simple Css rule, for example:

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 that Wysiwyg inside the CMS that I use often puts the code like this:

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

My css rule doesn't work. Is there a clean Css solution?

Thanks al

Answer 1

This should work:

 .hrefspan a:hover, strong { text-decoration: none;} <span class="hrefspan"><a>...</a></span> 

Putting it in a range and applying css only to the contents of this range, it will not affect other href or strong.

Answer 2

What you are trying to do is not supported in CSS - you cannot create a parent style. The best approach here would 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; } 

Thus, the connection can be easily formed. <strong> may be semantically incorrect if you use it only to style the link, and not to underline the text (although this may be less important, to be honest)

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

Answer 3

using

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

Answer 4

since you defined the rule as strong a: hover indicates the rules that apply to the a tag, which is present in the strong html tag

Answer 5

So, the bit that you really want to change is the undermining of the anchor

 a:hover { text-decoration:none; } 

If you want this to affect only certain links on the page, apply classes to them.

 <a class="notunderlined" href="http://www.stackoverflow.com"><strong>Foobar</strong></a> a.notunderlined:hover { text-decoration:none; }