Class Selector (CSS selector)

Spec
Version
CSS1
Browser support (more…)
IE7+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

.className {
declaration block
}

Description

Selecting elements on the basis of their class names is a very common technique in CSS. The attribute selector syntax [class~="warning"] is rather awkward, but thankfully there’s a simpler and shorter form for it: the class selector.

Here’s a simple example that selects all elements with a class attribute that contains the value "warning":

.warning {
  ⋮ declarations
}

This example also illustrates the use of an implied universal selector—it’s equivalent to *.warning. Note that whitespace characters can’t appear after the period, or between an element type selector, or explicit universal selector, and the period. For example, the following selector will match all p elements with a class attribute that contains the value "warning":

p.warning {
  ⋮ declarations
}

A simple selector may contain more than one attribute selector and/or class selector; in such cases, the selector pattern matches elements whose attributes contain all the specified components. Here’s an example:

div.foo.bar {
  ⋮ declarations
}
div.foo.bar[title^="Help"] {
  ⋮ declarations
}

The first example selector above matches div elements whose class attribute value contains both the words "foo" and "bar". The second example selector matches div elements whose class attribute values contains both the words "foo" and "bar", and whose title attribute values begin with the string "Help". To clarify further the html that would match the above selectors could be as follows:

<div class="foo bar">Matches first example</div>
<div class="foo bar" title="Help">Matches second example</div>

Example

The following selector will match all p elements with a class attribute that contains the value "intro":

p.intro {
  ⋮ declarations
}

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

In Internet Explorer 6, the class selector doesn’t work if the class name starts with a hyphen or an underscore.

In Internet Explorer up to and including version 6, only the last class selector is honored; all others in a chain of class selectors are ignored. For example, a selector like .x.y.z will match all elements with a class attribute that contains the value "z", but will not restrict the match to elements that also have the class attribute values "x" and "y", which it should.

In Internet Explorer versions up to and including 6, if an ID selector that’s combined with a class selector is unmatched, all subsequent ID selectors that use the same ID and are combined with a class selector, are also treated as unmatched.

User-contributed notes

ID:
#1
Contributed:
by svenyonson
Date:
Sat, 14 Nov 2009 00:26:34 GMT

As someone just starting out, pairing examples of (X)HTML with the CSS example would be helpful. i.e. show me what on my web page would / would not be matched by div.foo.bar

Related Products