CSS Tutorial
CSS1 Selectors
Type Selector
Selectors refer to elements in an HTML document tree. Using CSS, they are pattern-matched in order to apply styles to those elements. A selector consists of one or more elements, classes, or IDs, and may also contain pseudo-elements and/or pseudo-classes.
The type selector is the simplest selector of all, and matches all occurrences of an element. In this example, all <p> tags throughout the document will have the following style applied, unless overridden.
p {color: #666;}
Universal Selector
The universal selector, used alone, matches all elements in the document tree, and thus will apply styles to all elements. It is in effect a wildcard.
* {margin: 0; padding: 0;}
In this example, all tags are reset to have no padding or margin. This, by the way, is a practice to gain control over all the default padding and margin inherent in the way User Agents (UAs) display HTML.
Class Selector
The class selector matches a classname.
.largeFont {font-size: 1.5em;}
h3.cartHeader {text-align: center;}
The "largeFont" class will apply to all elements into which it is called. The "cartHeader" class will only function as styled if called into an H3 element. This is useful if you have another "cartHeader" declaration that you wish to override in the context of an H3 element, or if you wish to enforce the placement of this class.
ID Selector
The ID selector matches an ID. IDs are identifiers unique to a page. They bear a resemblance to classes, but are used a bit differently. IDs will be treated more fully below. The first two ID examples below refer to sections of a web page, while the last refers to a specific occurrence of an item, say, an image in a DHTML menu. IDs have a higher specificity than classes.
#header {height: 100px;}
#footer {color: #F00;}
#xyz123 {font-size: 9px;}
Descendant Selector
A selector can itself be a chain of one or more selectors, and is thus sometimes called a compound selector. The descendant selector is the only compound selector in CSS1, and consists of two or more selectors and one or more white space combinators. In the example below, the white space between the H1 and EM elements is the descendant combinator. In other words, white space conveys a hierarchy. (If a comma were to have intervened instead, it would mean that we were styling H1 and EM elements alike.) Selectors using combinators are used for more precise drill-down to specific points within the document tree. In this example <em> tags will have the color red applied to them if they are within an <h1> tag.
h1 em {color: #F00;}
Note that EM elements do not have to be immediately inside an H1 heading, that is, they do not have to be children, but merely descendants of their ancestor. The previous style would apply to an EM element in either of the following statements.
<h1>This is a <em>main</em> heading</h1>
<h1>This is <strong>another <em>main</em> heading</strong></h1>
In the next example, the color black will be applied to all <span> tags that are descendants (whether directly or not) of <div> tags which are in turn descendants (whether directly or not) of <p> tags, no matter how deep the <p> tags are in the document tree.
div p span {color: #000;}
That is to say, this style would apply to SPAN elements inside a P element, even if they are many levels below (that is, within) the DIV element, as long as there is an intervening P element.
The universal selector can be part of a compound selector in tandem with a combinator.
p * span {font-size: 0.6em;}
This would style any SPAN element that is at least a grandchild of a P element. The SPAN element could in fact be much deeper, but it will not be styled by this declaration if it is the child (direct descendant) of a P element.
Other Selectors
Other combinators convey greater precision. They include the direct adjacent sibling combinator (+), the indirect adjacent sibling (or general) combinator (~), and the child combinator (>). These combinators will be treated below because they are part of the CSS2.1 specification.