CSS selector for elements without text siblings

Question

I'm trying to find a CSS selector that can help me distinguish between the <var> tags in these 2 different usages:

<p><var>Foo</var></p>

And

<p>Some text <var>Foo</var> and more text</p>

Basically if a var has a sibling that is a text node I need to style it differently. Suggestions?

Answer 1

This is not possible, sorry. Check out that discussion: http://forum.userstyles.org/comments.php?DiscussionID=6 or the official W3C pages http://www.w3.org/TR/css3-selectors/ where you can see that even CSS3 will not support this. The only way CSS even considers the DOM text nodes is the :empty pseudo class selecting elements that are empty, i.e. do not have children neither text nodes.