Selectors

The first part of a CSS rule, the part before the opening curly brace, is the selector, or several selectors separated by commas. A selector represents a collection of elements in the page to which the subsequent rules apply. The simplest selector is a single tag name, such as the one we already used in a previous example. Following is a code snippet as another example:

p {
color:blue;
}

The selector p means all paragraph elements in the entire page. Applying this rule will result in all paragraphs in the entire page being rendered in blue. Similarly, we could use a class name. Refer to the following example:

.blue {
color:blue;
}

The selector .blue represents all the elements in the page that have the class blue, whether they are paragraphs, headings, or so on. Now we can combine the two, as shown here:

p.blue {
color:blue;
}

This selector represents the collection of all paragraph elements on the page with the class set to blue. For those of you that like set theory, this is the intersection...