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:
- ID, e.g.
#header
- Class, e.g.
.promo
- Type, e.g.
div
- Adjacent sibling, e.g.
h2 + p
- Child, e.g.
li > ul
- Descendant, e.g.
ul a
- Universal, i.e.
*
- Attribute, e.g.
[type="text"]
- Pseudo-classes/-elements, e.g.
a:hover
Not surprisingly, something like #myid is the fastest. More information can be found here: http://csswizardry.com/2011/09/writing-efficient-css-selectors/