Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

By : Ben Frain
5 (1)
Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

5 (1)
By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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...