Monday 29 May 2017

css selectors - What is the alternative to CSS-selecting an ancestor



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.


Answer



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.


No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...