Types of CSS selectors

Class selectors
In some cases, you may wish to modify an element or a group of elements. For instance,
you may wish for your general website text to be blue, as in the examples so far, but some
portions of it to be red. The simplest way of doing this is by using a class selector.
In CSS, a class selector’s name is prefixed by a period (.), like this:
.warningText {
color: red;
}
This style is applied to HTML elements in any web page the style sheet is attached to using
the class attribute, as follows:
<h2 class="warningText">This heading is red.</h2>
<p class="warningText">This text is red.</p>
<p>This is a paragraph, <span class="warningText">and this text is
å red</span>.</p>
You don’t have to lay out CSS rules as done in this section; rather, you can add rules
as one long string. However, the formatting shown here is more readable in print.
Note that in the files available for download, the formatting is changed slightly again:
the property/value pairs and closing curly bracket are both tabbed inward, enabling
rapid vertical scanning of a CSS document’s selectors.

If you want a make a class specific to a certain element, place the relevant HTML tag
before the period in the CSS rule:
p.warningText {
color: red;
}
If you used this CSS rule with the HTML elements shown previously, the paragraph’s text
would remain red, but not the heading or span, due to the warningText class now being
exclusively tied to the paragraph selector only.
Usefully, it’s possible to style an element by using multiple class values. This is done by
listing multiple values in the class attribute, separated by spaces:
<p class="warningText hugeText">
The previous example’s content would be styled as per the rules .warningText and
.hugeText.

ID selectors

ID selectors can be used only once on each web page. In HTML, you apply a unique identifier
to an HTML element with the id attribute:
<p id="footer">&copy; 200X The Company. All rights reserved.</p>
To style this element in CSS, precede the ID name with a hash mark (#):
p#footer {
padding: 20px;
}
In this case, the footer div would have 20 pixels of padding on all sides.
Essentially, then, classes can be used multiple times on a web page, but IDs cannot.
Typically, IDs are used to define one-off page elements, such as structural divisions,
whereas classes are used to define the style for multiple items.

Grouped selectors

Should you wish to set a property value for a number of different selectors, you can use
grouped selectors, which take the form of a comma-separated list:
h1, h2, h3, h4, h5, h6 {
color: green;
}
In the preceding example, all the website’s headings have been set to be green. Note that
you’re not restricted to a single rule for each element—you can use grouped selectors for
common definitions and separate ones for specific property values, as follows:
h1, h2, h3, h4, h5, h6 {
color: green;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
Contextual selectors
This selector type is handy when working with advanced CSS. As the name suggests,
contextual selectors define property values for HTML elements depending on context.
Take, for instance, the following example:
<p>I am a paragraph.</p>
<p>So am I.</p>
<div id="navigation">
<p>I am a paragraph within the navigation div.</p>
<p>Another paragraph within the navigation div.</p>
</div>
You can style the page’s paragraphs as a whole and then define some specific values for
those within the navigation div by using a standard element selector for the former and a
contextual selector for the latter:
p {
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
}
As shown, syntax for contextual selectors (#navigation p) is simple—you just separate the
individual selectors with some whitespace. The two rules shown previously have the following
result:
If you define a property value twice, browsers render your web element depending on
each rule’s position in the cascade. See the section “The cascade” later in the chapter
for more information.

The p rule colors the web page’s paragraphs black.
The #navigation p rule overrides the p rule for paragraphs within the navigation
div, coloring them blue and making them bold.
By working with contextual selectors, it’s possible to get very specific with regard to styling
things on your website; we’ll be using these selectors regularly.