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: ...
Get HTML5 and CSS3: Building Responsive Websites now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.