4

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

2
  • Just to make the point clear: you want to hide the underline of links that have a <strong> in them. a:hover strong doesn't work because <a> already has the underline. (You should really express that more clearly, that is the heart of your question)
    – Kobi
    Mar 2, 2011 at 12:19
  • possible duplicate of CSS selector for "foo that contains bar"?
    – Kobi
    Mar 2, 2011 at 12:23

5 Answers 5

6

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

1
  • Best solution. Exactly what I was whipping up til you did it first! +1
    – Kyle
    Mar 2, 2011 at 12:34
2

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.

2

use

a:hover strong 
{
  text-decoration:none;
}
1
  • 1
    Wouldn't work because a will still have an underline. I was wrong too. :P
    – Kobi
    Mar 2, 2011 at 12:20
0

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

0

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; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.