Select Page

As I write the styling for a new site, I want to pay careful attention to too much CSS.  As a result, I did some searching on layout times and came across a list of CSS Selector types ordered from most efficient to least efficient.  Here they are:

  1. ID, e.g. #header
  2. Class, e.g. .promo
  3. Type, e.g. div
  4. Adjacent sibling, e.g. h2 + p
  5. Child, e.g. li > ul
  6. Descendant, e.g. ul a
  7. Universal, i.e. *
  8. Attribute, e.g. [type="text"]
  9. Pseudo-classes/-elements, e.g. a:hover

Not surprisingly, something like #myid is the fastest.  More information can be found here: