CSS Level 4 selectors

There are a number of new selector types being specified for CSS Selectors Level 4 (the latest version available was the Editor's Draft dated December 14, 2014, (http://dev.w3.org/csswg/selectors-4/). However, as I write this, there are no implementations of them in browsers. As such we will just look at one example as they are liable/probable to change.

The Relational Pseudo-class selector is from the 'Logical Combinations' (http://dev.w3.org/csswg/selectors-4/) section of the latest draft.

The :has pseudo class

This selector takes this format:

a:has(figcaption) {
  padding: 1rem;
}

This would add padding to any item a tag that contains a figcaption. You could invert the selection in combination with the negation pseudo class too:

a:not(:has(figcaption)) {
  padding: 1rem;
}

This would add the padding if the a tag did not contain a figcaption element.

I'll be honest and say that right now, there aren't many new selectors in that draft that get me excited. But who knows what...