CSS Selectors

A selector is a pattern; it’s the part of a CSS rule that matches a set of elements in an HTML or XML document. The declarations that appear in the block that follows the selector are applied to all elements that match this pattern, unless they’re overridden by another rule in the cascade.

As is discussed briefly in Selectors, a selector can contain a chain of one or more simple selectors separated by combinators. A pseudo-element—for example, :first-line—can also be included after the last simple selector in the chain.

A simple selector contains either an element type selector, such as h1, or the universal selector, *. The universal selector can be considered to be implied (and can therefore be omitted) if it isn’t the only component of the simple selector.

A simple selector can also contain class selectors—for example, .warning, ID selectors—for example, #menu, attribute selectors—for example, [type="submit"], and pseudo-classes—for example, :hover. These act like modifiers on a type selector (or the universal selector), and qualify the selector, as if to say “but only if …”

Note: The CSS3 Difference

The terminology used in the CSS3 specification differs from that used for CSS2. In CSS3, the term “simple selectors” is used to refer to the various components: type selectors, the universal selector, attribute or ID selectors, and pseudo-classes. The selector component that CSS2 calls a “simple selector” is referred to as “a sequence of simple selectors” in CSS3. In this reference, we’ll use the CSS2 terminology, which should be familiar to most readers.

In this Section

User-contributed notes

by ryz
Wed, 15 Apr 2009 15:37:13 GMT

This is the best set of articles on CSS--especially selectors--I have seen on the web. Good work.

The concepts are not always easy, so even though I am happy with the articles, moutnbkr's suggestions would make them even better.

Again, great stuff.

Related Products