Style links NOT within a certain element

Question

Using child selectors I can alter only the 'a' elements within the 'p' tag, but is there a similar way to change only those NOT within the 'p' tag? Adding an additional class isn't an option.

So using the fiddle as an example, I want a way to change the background color of 'Link 1', 'Link 2' and 'Link 3' other than using the universal '.links' class.

http://jsfiddle.net/pixeloco/Nuy9a/

<p>Lorem ipsum dolor <a href="#" class="links">click me</a></p>
<a href="#" class="links">Link 1</a>
<a href="#" class="links">Link 2</a>
<a href="#" class="links">Link 3</a>

Answer 1

No, this would not be possible with pure CSS since there is currently no parent selector.

You could, however, use the following work-around. Just style all the .links elements. Then just reset the styling by selecting .links elements that are children of p elements.

Example Here

.links {
    background-color:#ccc;
}

p > .links {
    background-color:transparent;
}

As an alternative, you could also use the following. It's worth noting that this method will only work with your current HTML. (example)

p ~ a.links {
    background-color:#ccc;
}

---

If you want a jQuery solution, you could use the following. It will select all a elements that are not children of p elements.

Example Here

$('a:not(p a)').css('background','#ccc');