Some CSS Selector Basics

CSS Selectors are the pattern matching strings that determine which HTML elements will be affected by the CSS rule. Writing good selectors is one of the keys to writing good CSS.

Here are some examples of the most commonly used CSS Selector patterns that you see all the time:

Select by Tag name:

h1 { color: blue; } /* all h1's in the document */
div { color: blue; } /* all divs in the document */

Note: if you make a mistake and write a rule like this: dib { color: blue; }
then that's an error because that would only work if "dib" were actually
a valid HTML tag.

Select by Class:

.someclass { color: blue; }  /* All elements that have class="someclass" */
*.someclass{ color: blue; } /* ditto */
h1.someclass{ color: blue; } /* just h1's with class="someclass" */
div.someclass{ color: blue; } /* and div'swith class="someclass" */

With class selectors, there is always a period preceding the class name. As shown in the examples above, you can also precede the period with an HTML element name, which has the effect of narrowing the scope of the selector to just the HTML elements of that type, and with a matching class name.

Select by ID:

#someid {color: blue;} /* All elements that have id="someid" (should only be one in a given document) */
*#someid {color: blue;} /* ditto */
h1#someid {color: blue;} /* Only an h1 with id="someid" */
div#someid {color: blue;} /* Only a div with id="someid" */

With ID selectors, the element's ID is preceded by a pound sign (#). A given ID should be assigned to only a single element on a page, in which case the ID selector only selects that single element. In practice browsers will let you get away with multiple elements with the same ID and they will select all of them. But it's best to not rely on that, and keep an ID uniquely assigned to a single element.

Descendant Selectors:

div h1 { color: blue; }  /* Any h1's that are descendants of any div */
.someclass h1 { color: blue; }  /* Any h1's that are descdants of any element with class="someclass" */
.someclass div h1 { color: blue; }  /* Any h1 that is a descendant of a div that is a descendant of an element with class="someclass" */
div.someclass div h1 { color: blue; } /* Same thing except it has to be a div with class="someclass" */
div#someid div h1 { color: blue; }  /* Same thing, except it must be a div with id="someid" */

Descendant selectors are written by first writing a normal selector for some parent HTML element (e.g. a div that encloses the element you are trying to target with the CSS rule), then putting a space, then writing a normal selector for the target element. So "div.someclass h1" selects all h1's within the div of class "someclass".

Descendant selectors are common, and they are very important for being able to reduce the number of class and ID attributes that you have to code into the markup. If you can get at the element through its parent or grandparent, then you don't have to add a class or ID attribute to that element.

There are other CSS selector patterns as well, with varying degrees of support in browsers. Here are a couple of examples:

div > h1 { color: blue; } /* h1 that is a direct child (not a grandchild) of a div. */
div + h1 { color: blue; } /* h1 that is immediately preceded by a sibling div */

For more info on the CSS 2.1 selectors, see the w3 standard, section 5.1.