Frontend Engineering, Volume II

CSS: Chapter 4 Companion—More Selectors

© 2013, Martin Rinehart

Paragraphs chosen with sibling selector

Selectors in W3C Standards

In the CSS 1 Recommendation:

In the CSS 2.1 Recommendation:

W3C CSS 3 selectors (including general sibling):

"Selectors that People Actually Use"

John Resig's jQuery library (the most popular JavaScript library in use five years ago and now) relies heavily on CSS-like selectors. Resig wrote about the ones that were really used:

Resig's complete data:

For thorough coverage, all selectors:

The "30 CSS Selectors you[stet] Must Memorize" (a couple dozen more than we think You need to know):

The "10 CSS selectors you shouldn't code without" (a more selective but still large list):

A thoughtful critique of current limitations:


Excellent overall coverage, especially the linked fragment:

A scary example of CSS incompatibilities before 2.1 became universal:

A timeline from the old days:

From CSS2 (early this century) history, by PPK:

Selector Basics

A handy quick reference:

Selector grouping (a quick review):

Another good review of the basics:


The basic combinators:

The basics according to Microsoft: (Warning: MSDN includes the general sibling combinator, without mention that it is from CSS3.)

The "complete" (its own description) guide: (Does note that the general sibling combinator is CSS3.)

Attribute Selectors

All you need to know, and a lot more:

(If we had only one source for documentation it would be MDN. Some frontend engineers use it as a search prefix: google "MDN attribute selectors".)


Covers all selectors, especially good with pseudo-classes:


Order matters with link pseudo-elements:

Selector Specificity

We recommend ids and classes to avoid this topic. This is a contrary view of selector specificity:

Selector Specificity, Not Important

On not using "!important":

More recently, on not using "!important": .

Feedback: MartinRinehart at gmail dot com

# # #