Here is a handy quick reference guide for the most common CSS selectors.
Direct Selectors
These selectors select an element in any context.
| Type | Designator | Note | Example | Effect |
|---|---|---|---|---|
| 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 |
Context Selectors
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.
| Type | Operator | Note | Example | Effect |
|---|---|---|---|---|
| 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 |
Combining Selectors
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:
| Selector | Effect |
|---|---|
| .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
Attribute selectors can specify the value they are to match. There are several operators that can be used with attribute selectors and values.
| Operator | Note | Example | Effect |
|---|---|---|---|
| = | 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
Matt 
Roland Barker 
Hi again Roland,
I have a quick question – after implementing the tabs through your plugin and modifying the code for pdb-record-tabs, I noticed that there is an increasing amount of white space at the top of each tab, as shown here: http://i.imgur.com/nEKkvLp.png
After using the Inspect Element tool in Chrome (shown on the right), it looks like this white space is from the table elements of the preceding tabs. Have you seen this before or possibly know what is causing this? I understand this may be outside the scope of what you normally offer. If there is any CSS that could be added to remove this extra white space (the current “display:none;” doesn’t seem to be working in that regard), I’d greatly appreciate any suggestions you can offer.
It looks like you need to remove the top margin from the table. I haven’t seen this so I can’t say specifically what the best solution is.