CSS 2.1 selectors, Part 1

Among the first things you learn about when you start out with CSS are selectors. Selectors are obviously a fundamental part of CSS, but few developers use them to their full potential. While you can get a lot done with just the type, ID, and class selectors, there are many more.

Learning how to use the full range of CSS selectors available in CSS 2.1 properly can actually help you keep your HTML a lot cleaner. It will let you minimise unnecessary use of the class attribute and the need for adding extraneous div and span elements to the markup. Sounds good, right?

So why isn’t the full range of selectors in wide use? The most important reason has been insufficient support in Internet Explorer up to and including version 6. All other recent browsers support most or all CSS 2.1 selectors. Be aware of that before rushing out to use everything that is described in this series.

The good news is that Internet Explorer 7 will have much better support for selectors. Knowing that you will be able to put them to good use in the future, now is as a good a time as any to learn about the full range of selectors that are available.

Since there are so many CSS selectors, a single article explaining them all would become very long. To make the information easier to digest I have split this into three parts:

1. Part 1, this article, explains the basics of selectors plus the universal, type, id, and class selectors.
2. Part 2 is about combinators, combined selectors, grouping, and attribute selectors.
3. Part 3 will be all about pseudo-classes and pseudo-elements.

I will post the articles over a couple of weeks and update each of them with links to the other parts as they are published.

Right then. Let’s get started.

Selector basics

First the very basics. A CSS selector is made up of a pattern that is matched against all elements in the document tree. When all conditions in the pattern are true, the selector matches and the declarations within the rule are applied to the element or elements that match. Consider this very simple CSS rule:

p { color:#f00; }

The selector is the part of a CSS rule that comes before the opening curly brace, "{". The selector here is p, which will match all p elements in the document and make any text they contain red. Very basic.

Selector overview

Ok, that was a really simple example. I’m going to describe all the other selectors later on, so things will definitely get a bit trickier. Before that though, here is an overview of the syntax for all CSS 2.1 selectors (based on the table in CSS 2.1, 5.1 Pattern matching):

I’ll explain each of these selector types in more detail in this two part article, so keep reading. A few terms used in that table and in the rest of this article may need some clarification:

descendant

An element that is the child, grandchild or later descendant of an element in the document tree.

ancestor

An element that is the parent, grandparent or earlier ancestor of an element in the document tree.

child

The direct descendant of an element. No other elements may come between the two in the document tree.

parent

The direct ancestor of an element. No other element may come between the two in the document tree.

sibling

An element that has the same parent as the current element.

Simple and combined selectors

There are two basic categories of selectors: simple and combined.

A simple selector consists of either a type selector or the universal selector followed by zero or more attribute selectors, ID selectors, or pseudo-classes. The following rule contains an example of a simple selector:

p.info { background:#ff0; }

A combined selector (sometimes called a contextual selector) consists of two or more simple selectors separated by a combinator. This is an example of a very simple combined selector:

div p { font-weight:bold; }

The above rule will apply to all p elements that are descendants of a div element.

One pseudo-element may be appended to a selector. In a combined selector, a pseudo-element may only be appended to the last simple selector.

Details on combined selectors, combinators, and pseduo-elements can be found in Part 2 and Part 3 in this series.

The universal selector

The universal selector is represented by an asterisk, “*”, and matches all elements in the document. It’s pretty rare to see it in a style sheet, but the universal selector is actually often used with class and ID selectors. If the universal selector is not the only component of a simple selector, the “*” may be omitted:

• .myclass is equivalent to *.myclass
• #myid is equivalent to *#myid

One use of the universal selector that has become quite popular is using it to set the margins and paddings of all elements to zero:

* { margin:0; padding:0; }

This is sometimes referred to as the Global White Space Reset.

Type selectors

A type selector matches every instance of a particular element type. The following rule matches all paragraph elements in the document and sets their font size to 2em:

p { font-size:2em; }

The class selector

The class selector is represented by a full-stop, “.”, and targets elements based on the value of their class attribute. The following rule will apply to all p elements with a class name of “info”:

p.info { background:#ff0; }

You can assign multiple class names to an element—the class attribute can hold a space separated list of class names. Class selectors can then be used to target only elements which have several class names. This rule will match p elements which have both “info” and “error” in their list of class names:

p.info.error { color:#900; font-weight:bold; }

Note: Multiple class selectors do not work in current versions of Internet Explorer, but will be supported in IE7.

The element type does not have to be specified. Leaving it out is the same as using a universal selector instead of a type selector. This rule will match all elements with a class name of “info”, regardless of their type:

.info { background:#ff0; }

The ID selector

The ID selector is represented by a hash sign, “#”, and targets elements based on their id value. This rule will apply to an element whose id is “info”, regardless of which element type it is:

#info { background:#ff0; }

If you also specify an element type, the rule will only apply to elements of that type:

p#info { background:#ff0; }

It is important to remember that ID selectors have higher specificity than class selectors, and that an id value must be unique within a document. Therefore an ID selector can only apply to a single element in a document.

To be continued…

Ok, that’s it for Part 1 of this article series. In Part 2 I will walk you through combinators, combined selectors, grouping, and attribute selectors, and in Part 3 I will take a closer look at pseudo-classes and pseudo-elements.

Posted on September 26, 2005 in CSS

• Previous post: Check marking visited links
• Next post: CSS 2.1 selectors, Part 2