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 …”
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
- Universal Selector
matches any element type - Element Type Selector
matches elements with the specified element type name - Class Selector
selects elements with a specified class attribute value - ID Selector
matches an element with a specificidattribute value - Attribute Selector
selects elements based on attribute values - Selector Grouping
- Combinators
- Pseudo-classes
- Pseudo-elements
User-contributed notes
- ID:
- #3
- Date:
- Wed, 15 Apr 2009 15:37:13 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.