Selectors

The basics of selectors plus the universal, type, id, and class selectors.

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?

Selector 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.

🛑 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.

Overview of CSS selector syntax
Selector type	Pattern	Description
Universal	*	Matches any element.
Type	E	Matches any E element.
Class	.info	Matches any element whose class attribute contains the value info.
ID	#footer	Matches any element with an id equal to footer.
Descendant	E F	Matches any F element that is a descendant of an E element.
Child	E > F	Matches any F element that is a child of an E element.
Adjacent	E + F	Matches any F element immediately preceded by a sibling element E.
Attribute	E[att]	Matches any E element that has an att attribute, regardless of its value.
Attribute	E[att=val]	Matches any E element whose att attribute value is exactly equal to val.
Attribute	E[att~=val]	Matches any E element whose att attribute value is a list of space-separated values, one of which is exactly equal to val.
Attribute	E[att|=val]	Matches any E element whose att attribute has a hyphen-separated list of values beginning with val.
The :first-child pseudo-class	E:first-child	Matches element E when E is the first child of its parent.
The link pseudo-classes	E:link E:visited	Matches not yet visited (:link) or already visited (:visited) links.
The dynamic pseudo-classes	E:active E:hover E:focus	Matches E during certain user actions.
The :language pseudo-class	E:lang(c)	Matches elements of type E that are in language c.
The :first-line pseudo-element	E:first-line	Matches the contents of the first formatted line of element E.
The :first-letter pseudo-element	E:first-letter	Matches the first letter of element E.
The :before and :after pseudo-elements	E:before E:after	Used to insert generated content before or after an element’s content.

A few terms used in that table 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”:

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.

p#info { background:#ff0; }

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

#info { background:#ff0; }

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:

The ID selector

.info { background:#ff0; }

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:

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

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

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 { background:#ff0; }