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

Just to make the point clear: you want to hide the underline of links that have a `` in them. `a:hover strong` **doesn't work** because `` already has the underline. (You should really express that more clearly, that is the heart of your question) — Kobi, Mar 02 '11 at 12:19
possible duplicate of [CSS selector for "foo that contains bar"?](http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar) — Kobi, Mar 02 '11 at 12:23

Kobi · Answer 1 · 2011-03-02T12:29:18.663

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

edited Mar 02 '11 at 12:29

answered Mar 02 '11 at 12:16

Kobi

135,331
41
252
292

Best solution. Exactly what I was whipping up til you did it first! +1 – Kyle Mar 02 '11 at 12:34

score 2 · Answer 2 · edited Jun 24 '19 at 18:42

2

use

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

edited Jun 24 '19 at 18:42

baikho

5,203
4
40
47

answered Mar 02 '11 at 12:17

Ujjwal Manandhar

2,194
16
20

1

Wouldn't work because `a` will still have an underline. I was wrong too. `:P` – Kobi Mar 02 '11 at 12:20

Stijn Geukens · Accepted Answer · 2017-04-11T07:17:57.670

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.

edited Apr 11 '17 at 07:17

answered Mar 02 '11 at 12:23

Stijn Geukens

15,454
8
66
101

score 0 · Answer 4 · answered Mar 02 '11 at 12:17

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

answered Mar 02 '11 at 12:17

Poonam

4,591
1
15
20

Evil Andy · Answer 5 · 2011-03-02T12:28:35.323

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

edited Mar 02 '11 at 12:28

answered Mar 02 '11 at 12:23

Evil Andy

1,748
1
14
19

Css selector for a > strong

5 Answers5