CSS Hover属性在子元素而不是整个元素上

Question

Hopefully this makes sense - my html is as follows

html

<a href="#" class="someclass">An <span class="sub">Interesting</span> Link</a>

where the css is simply color information. What I'd like to do is to make it so when you mouseover the link as a whole only the "sub" information is affected by the hover attribute. While this would be easy enough to do in javascript I was curious as to whether or not css allowed for this behavior. If I were to try to write this it would probably look like

a:hover{
    .sub{color:newcolor};
}

however I've never seen anything like that and obviously it doesn't work

Answer 1

a:hover .sub { color: newcolor }

Answer 2

Like this:

a:hover .sub { color: #f00; }

If you need to apply it only to that specific class:

a.someclass:hover .sub { color: #f00; }