Here is a handy quick reference guide for the most common CSS selectors.
These selectors select an element in any context.
|tag||(none)||selects all named HTML tags||div||selects all div tags|
|class||.||selects all elements with the specified classname||.hentry||selects all tags with class “hentry”|
|id||#||selects the element with the named identifier||#content||selects the element with an id of “content”|
|wildcard||*||selects any element||*||all elements are selected|
|attribute||||selects elements with the specified attribute (see below)||[name]||selects all elements with a “name” attribute|
These selectors use the context of the element to make the selection. This works by joining two selectors with an operator. The the result of the last selector is the selected element.
|descendant||(space)||selects descendants of the first selector||#content p||selects all p tags contained by the element with id “content”|
|child||>||selects the first child||ul > li||selects all li tags that are direct children of a ul|
|adjacent||+||selects the next adjacent sibling||h2 + p||selects a p tag if it immediate follows an h2 tag|
Selectors can be combined in any number of ways. Multiple selectors can share a rule set if they are separated by a comma. Here are a few examples that will help clarify some possibly confusing cases:
|.hentry.post||element must have both “hentry” and “post” classes|
|.hentry, .post||elements with either class “hentry” or “post” will be selected|
|span:hover a||the a tag will be selected only when the mouse is over the span tag|
Attribute selectors can specify the value they are to match. There are several operators that can be used with attribute selectors and values.
|=||exactly equals value||[name=”email”]||selects all elements with a “name” attribute of “email”|
|*=||contains value||[name*=”cat”]||selects all elements with the string “cat” anywhere in its “name” value|
|^=||begins with value||[id^=”pdb”]||selects all elements whose “id” value begins with the string “pdb”|
|$=||ends with value||[name$=”code”]||selects all elements whose “name” attribute ends with the string “code”|
|~=||contains word in space-separated list||[class~=”post”]||selects all elements having a class of “post”|
Official spec for selectors: W3C Selectors Spec