Class Selector (CSS selector)

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 CSS selectors could be as follows:

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

p.intro {
  ⋮ declarations
}