XPathy

Using XPath Selectors in CSS

XPathy is a CSS reprocessor that resolves selectors using XPath. This plugin will read CSS selectors that end with a [xpath] attribute and use JavaScript and XPath to determine whether or not to apply that style to elements matching the other part of that selector. For example, the XPath selector //div will always resolve to div, so a selector written for div [xpath="//div"] {} will always apply to each div div {} element.

By default, XPathy will reprocess selectors by watching the following events:

To run XPathy whenever you want, use the xpathy.load() function in JS.

Other things you can do with XPathy include:

Select all span tags with the XPath //span:

[xpath="//span"] {
  color: violet;
}

Select all elements with a class name of demo-class with the XPath //*[@class='demo-class']:

[xpath="//*[@class='demo-class']"] {
  color: lime;
}

Select an element with a text content of ‘Demo Content’ with the XPath //*[text()='Demo Content']:

[xpath="//*[text()='Demo Content']"] {
  color: violet;
}

Select the parent element of another element with the XPath /..:

[xpath="//*[@class='child']/.."] {
  border: 1px solid lime;
}

Compare attribute values as numbers with operators like > and <:

[xpath="//*[@data-price > 3]"] {
  color: violet;
}

Select elements based on the number of children they contain with an XPath like //ul[li[4]]:

[xpath="//ul[li[4]]"] {
  color: lime;
}

Techniques Capable