Selectors Usage Tips

We’ve taken a look at some interesting CSS selectors that allow you to have great control over parts of your document. Here are some final thoughts regarding using these selectors on real projects and the future of CSS Selectors.

Selectors Level 4

The selectors we have looked at so far have been those that are part of Selectors Level 3, which is a W3C Recommendation. These selectors have excellent browser support unless you need to have a high level of support for Internet Explorer 8. Even in that case selectors are relatively easy to polyfill. For support of very old IE I’d suggest Selectivizr.

There is a new specification in draft stage for Selectors Level 4. This draft includes existing selectors - just as Level 3 includes the selectors from previous versions of CSS - but adds new selectors. Of particular interest to layout are the proposals for Grid Structural Pseudo-classes.

Currently there is little in the way of browser support for Level 4 selectors. If you want to read about some of the new selectors proposed as part of that spec you can take a look at this article on SitePoint.

Should I add a class or use a complex selector?

As you have seen, it’s quite possible to have a large amount of control over selecting elements in your document and applying styles to them. So should you be trying to avoid adding classes to documents and using these selectors instead?

As with most things, the answer is it depends. However there are a few things you might like to think about.

Selecting an element depending on document context can be very useful. For example, perhaps you have a blog and each blog post is inside an article element with a class of post. You could use complex selectors to add the finishing touches to your typography, without needing to add classes within the body of the post. Things like:

Making the paragraph that comes after the main heading larger.

.post h1+p {
  font-size: 120%;
}

Removing a large top margin when headings are stacked.

.post h2+h3 {
  margin-top: 0;
}

This visual styling is tied to the context of a blog post, it makes sense to do that in the CSS. You get the added benefit of not needing to find a way to add classes to your blog posts (and to remember to do that) so visual consistency and speed of editing the content is maintained. You also don’t end up with classes in your document that are purely for presentation purposes, and that make no sense if the content is also displayed somewhere else.

Selectors such as nth-child, first-child and last-child can be very useful in layout. Being able to detect that you are displaying the last column and then remove the right margin for example. Or in a responsive design, doing something every second item at one breakpoint and every third item at another. These are things that wouldn’t be possible just by adding classes as they depend on the current state of the document and how it is being viewed.

Where selecting elements based on their location in the document makes less sense is when you want to make reusable components. For example I would add a class to a div that was containing something like a media element, rather than try and pick it out based on location. I might of course use a more complex selector to target things inside that container.

If you find you are creating very long chains of selectors that is usually a sign that you would do well to take a look at your CSS and see if you make more reusable components from elements in your site. These complex selectors can make your life much easier, but overuse can create complicated and hard to re-use CSS.

Next lesson: Absolute Units