Examples of CSS selector strength.

this-is-madness.css

* {}

tag {}

[attribute] {}

[attribute="value"] {}

.class {}

tag[attribute] {}

tag[attribute="value"] {}

tag.class[attribute] {]}

tag.class[attribute="value"] {}

#id {}

tag#id {}

tag#id[attribute] {}

tag#id[attribute="value"] {}

#id.class {}

tag#id.class {}

tag#id.class[attribute] {}

tag#id.class[attribute="value"] {}

/*
  And of course, !important always
  wins, no matter what the selector.
*/

tag {
  key: value !important;
}

/*
  And, the whole game begins anew, as soon as
  there's a parent with a descendant selector.
*/

tag {}

body tag {}

tag#id.class[attribute="value"] {}

body tag#id.class[attribute="value"] {}

/*
  Here's a cool trick you can do, since .foo can also
  be written as attribute selector of [class="foo"].
*/

.foo[class~="foo"] {}

/*
  Or, hey... Stacked attribute selectors!
*/

input[type="text"][disabled] {}

/*
  Really, everthing except for tag/id
  can be stacked, if multiples exist.
*/

.class-1.class-2[attribute-1="value"][attribute-2="value"] {}

tag#id.class-1.class-2[attribute-1="value"][attribute-2="value"] {}

I think .foo[class="foo"] {} should read .foo[class~="foo"] {} to work if the element has multiple classes.

E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
via http://www.w3.org/TR/css3-selectors/

True. I'll make that change. But also, didn't want to further confuse my designer coworker. 😄

Don't forget about chaining the same class for extra specificity: .class1.class1 {}