CSS Selectors Redux

If you haven’t checked in on CSS’s newer and more advanced selectors for a couple of years, come see what you’ve been missing! Where once CSS selectors formed the “tradie’s tool belt” of every front-end developer, these days reliance on preprocessors like Sass and sophisticated template frameworks leads most developers to grab the same hammer to solve every problem: class selectors.

Kevin Yank will take you on a whistle-stop tour of the CSS selector landscape, from surprising new tricks in trusty standbys like attribute selectors, to enticing (and occasionally heartbreaking) glimpses of the future like :matches and :has.

slides [http://kevinyank.com/posts/css-selectors-redux]

CSS selectors allow us to point to parts of our document and say, “I want to control how you look”.

 

There is very little that is new in CSS Selectors today, and what is being made available by the standards body is more like paper clips and rubber bands than the power tools we want.

 

We are not making the best use of selectors we do already have, and the selectors we do have can be used in new and clever combinations to deliver greater control and create desirable effects.

There are under-utilised pseudo-classes for styling checkboxes and radio buttons, HTML form validation, selecting children, indicating a lack of content, targeting specific elements and creating exceptions to a selection rule.

 

The general sibling selector ( ~ ) selects all the specified sibling elements following a specified element.

 

Add an i before the closing bracket in a selector to cause the value to be compared case-insensitively, the :matches pseudo class groups elements and applies a style to them, and :placeholder-shown allows us to style the input element when placeholder text is present.

 

Using mainly class attributes, such as in some frameworks, effectively abandons HTML semantics when it comes to styles.

 

Use the lobotomised owl selector ( * + * ) to style the space between any two adjacent blocks on a page.

The reason there is so little that’s actually new in CSS selectors is that developers aren’t asking for them.

 

A prescriptive approach to using classes that applies a different class to every element on a page is unintelligent. An axiomatic approach that defines the relationship between elements on the page creates intelligent selectors with useful and surprising results.

 

Two features that were in the Selectors Level 4 Working Draft were the :local-link (targets links that are on the same domain as the current page) and the reference combinator (lets you style one element becuase the attribute of another element points to it). Both have been removed from the CSS4 draft due to no browser support and “lack of interest”.

 

The :has pseudo class is still in the CSS4 Draft. This will let you style an element based on what it contains. It may be the holy grail of selectors. However, while every other selector we know about is in the “dynamic profile”, :has is in the “static profile”, which means it can only be used in JavaScript.

 

Ultimately, developers have to make more noise about what they do and don’t want in CSS selectors.