XPath Selector - tomhodgins/process-css-demo GitHub Wiki

A custom pseudo-class-style selector to allow CSS authors the ability to target elements matching an XPath expression.

<node>:--xpath(<path>) { <list of declarations> }

• <node> is a CSS selector matching the elements inside which you want to evaluate the XPath expression, the missing value default for this is :root which will look inside the entire document
• <path> is an XPath expression to match elements inside the supplied node

XPath can do a lot of things, including run testing functions on elements, their properties and attributes, their children, and can also traverse the DOM in more directions than CSS selectors - XPath can move forward and backward in the document, up to parents and ancestors, down to children and descendants, backward to previous siblings, and forward to next siblings, and one selector can change 'directions' as many times as you need to describe the 'path' to the element you're trying to target.

If you wanted to find all elements in the document that have text content longer than 500 characters, you could use an XPath expression like //*[string-length(text()) > 500], so to use that with our plugin we would put it inside a :--xpath() selector, making sure to escape any characters or sequences CSS my not like with a backslash \ before the offending characters:

:--xpath('//\*[string-length(text()) > 500]') {
  background: lime;
}

Since we used :--xpath() without any CSS selector before it, the default is to look inside the :root element and match tags in there. We could further limit this by 'scoping' our XPath expressions to elements in our document matching a CSS selector by supplying a CSS selector along with it. This example would only look for elements with 500+ characters of text content inside <ul> elements

ul:--xpath('//\*[string-length(text()) > 500]') {
  background: lime;
}

• This feature automatically uses jsincss-xpath-selector plugin for support in the browser.