1

CSS(3) has descendent selectors, e.g. td em {color: red};, but no ancestor selector, apparently.

So, what should I do instead of something like td {border: 1pt solid red} em; ? i.e., how can I set a style on ancestors of some (X)HTML element?

Note:

  • Javascript is not relevant for the workaround, something XPath'y might be.
Community
  • 1
  • 1
einpoklum
  • 118,144
  • 57
  • 340
  • 684
  • As I understand your example, if a `td` contains an `em` then you want to set a `border` on it. That is not possible through css alone. Are you open to a javascript/JQuery solution in your "workaround" (as you tagged)? If so, then there is a solution. – ScottS May 14 '13 at 14:09
  • Duplicate of http://stackoverflow.com/questions/1251768/css-parent-ancestor-selector. –  May 15 '13 at 05:32

1 Answers1

2

You can wait for CSS4 selectors to be implemented, then do

td! em {
    border: 1pt solid red;
}

See http://dev.w3.org/csswg/selectors4/.

Or...

var xpathresult = document.evaluate("//td[.//em]", 
    document, null, XPathResult.ANY_TYPE, null); 
while (e=xpathresult.iterateNext()){
    e.classList.add("border");
}

See https://developer.mozilla.org/en-US/docs/DOM/document.evaluate. Normal browser support caveats apply.

  • The element with the exclamantion mark `td` is the element that the rule applies to, instead of the element to the far right of the selector `em` . Just don't hold your breath for support :) – Ruan Mendes May 15 '13 at 05:47