Selectors have an inherent efficiency, and to quote Steve Souders, the order of more to less efficient CSS selectors goes thus:
- 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
Resources
- Writing efficient CSS selectors
- Efficiently Rendering CSS by CSSTricks
- Writing efficient CSS @ Mozilla developer
