HTML and CSS Reference
In-Depth Information
Element Selectors
The most basic of all selectors is the
element selector
(you may have heard them called
tag
selectors
). It is simply the name of an (X)HTML element, and—not surprisingly—it selects all
of those elements in the document. Let's look again at the previous example:
h1 {
color: blue;
}
h2 {
color: green;
}
We've used
h1
and
h2
as selectors. These are element selectors that select
h1
and
h2
elements
within the (X)HTML document, respectively. Each rule indicates that the declarations in the
declaration block should be applied to the selected element. So, in the previous example, all
h1
elements in the page would be blue and all
h2
elements would be green. Simple enough, right?
■
Note
Although this topic is about using CSS to style (X)HTML documents, CSS can be used for other
types of documents as well (notably XML). Therefore, it's entirely possible that you will run across element
selectors that are not valid (X)HTML elements.
Class Selectors
So far we've been assigning styles exclusively to (X)HTML elements, using element selectors.
But there are several other types of selectors, and the
class
and
ID selectors
may be next in line
as far as usefulness. Modern markup (as discussed in Chapter 1) often involves the assigning
of classes and IDs to elements. Consider the following:
<h1 class="warning">Be careful!</h1>
<p class="warning">Every 108 minutes, the button
➥
must be pushed. Do not attempt to use the computer
➥
for anything other than pushing the button.</p>
Here, we've specified a
class
of
warning
to both the
h1
element and the
p
(paragraph) element.
This gives us a hook on which we can hang styles that is independent of the element type. In
CSS, class selectors are indicated by a class name preceded by a period (
.
); for example:
.warning {
color: red;
font-weight: bold;
}
This CSS will apply the styles noted in the declaration (a red, bold font) to all elements that
have the class name
warning
. In our markup, both the
h1
and the
p
elements would become
red and bold. We can join an element selector with a class selector like this:
