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: http://www.w3.org/TR/REC-CSS1/#id-as-selector.

In the CSS 2.1 Recommendation: http://www.w3.org/TR/CSS2/selector.html#id-selectors.

W3C CSS 3 selectors (including general sibling): http://www.w3.org/TR/css3-selectors/.

"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: http://ejohn.org/blog/selectors-that-people-actually-use/.

Resig's complete data: http://ejohn.org/files/selectors.html.

For thorough coverage, all selectors: http://learn.shayhowe.com/advanced-html-css/complex-selectors.

The "30 CSS Selectors you[stet] Must Memorize" (a couple dozen more than we think You need to know): http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/.

The "10 CSS selectors you shouldn't code without" (a more selective but still large list): http://www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/.

A thoughtful critique of current limitations: http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitations.

History

Excellent overall coverage, especially the linked fragment: http://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_2.1.

A scary example of CSS incompatibilities before 2.1 became universal: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug.

A timeline from the old days: http://www.blooberry.com/indexdot/history/css.htm.

From CSS2 (early this century) history, by PPK: http://www.quirksmode.org/oddsandends/history_css.html.

Selector Basics

A handy quick reference: http://www.w3schools.com/cssref/css_selectors.asp.

Selector grouping (a quick review): http://reference.sitepoint.com/css/selectorgrouping.

Another good review of the basics: http://learnwebcode.com/basic-css-selectors/.

Combinators

The basic combinators: http://reference.sitepoint.com/css/combinators.

The basics according to Microsoft: http://msdn.microsoft.com/en-us/library/ie/hh869407(v=vs.85).aspx. (Warning: MSDN includes the general sibling combinator, without mention that it is from CSS3.)

The "complete" (its own description) guide: http://www.suburban-glory.com/blog?page=131. (Does note that the general sibling combinator is CSS3.)

Attribute Selectors

All you need to know, and a lot more: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors.

(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".)

Pseudo-Classes

Covers all selectors, especially good with pseudo-classes: http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Selectors#Pseudo-Classes.

Pseudo-Elements

Order matters with link pseudo-elements: http://www.codecademy.com/forum_questions/512666fde7f866872c00070f.

Selector Specificity

We recommend ids and classes to avoid this topic. This is a contrary view of selector specificity: http://coding.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/.

Selector Specificity, Not Important

On not using "!important": http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/.

More recently, on not using "!important": http://blog.frankmtaylor.com/2014/06/20/the-end-of-important-using-specificity-tricks-to-trump-styles/ .


Feedback: MartinRinehart at gmail dot com

# # #