Posted on by

CSS Selector Quick Reference

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

 

 

2 thoughts on “CSS Selector Quick Reference

  1. 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.

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.

2 thoughts on “CSS Selector Quick Reference

  1. 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.

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to be notified of followup comments via e-mail? You can also subscribe without commenting.