Selectors define which part(s) of your (X)HTML document will be affected by the declarations you’ve specified. Several types of selectors are available in CSS. Note that some of them are not supported in all browsers.
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 at the example:
h1 {color: blue;}
h2 {color: green;}
We’ve used h1 and h2 as selectors. These are element selectors that select h1 and h2elements 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 book 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 often involves the assigning of classes and IDs to elements. Consider the following:
<h1>Be careful!</h1>
<p>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:
p.warning {color: red; font-weight: bold;}
This rule will assign the red color and bold weight only to paragraph elements that have been assigned the class warning. It will not apply to other type elements, even if they have the warning class assigned. So, the h1 in our previous markup would be ignored by this style rule, and it would not become red and bold. You can use these rules in combination to save yourself some typing. Take a look at this block of CSS code. We’ve got two style rules, and each has several of the same declarations:
p.warning {
color: red;
font-weight: bold
font-size: 11px;
font-family: Arial;
}
h1.warning {
color: red;
font-weight: bold
font-size: 24px;
font-family: Arial;
}
A more efficient way to write this is
.warning {
color: red;
font-weight: bold
font-size: 11px;
font-family: Arial;
}
h1.warning {
font-size: 24px;
}
Class selectors can also be chained together to target elements that have multiple class names. For example:
<h1>Be careful!</h1>
<p>Every 108 minutes, the button must be pushed. Do not attempt to use the computer for anything other than pushing the button.</p>
<p>The code is 4-8-15-16-23-42.</p>
A .warning selector will target both the h1 and first p elements, since both have the class value warning. A .help selector will target both p elements (both have a class value of help). A chained selector such as .warning.help will select only the first paragraph, since it is the only element that has both classes (warning and help) assigned to it.
ID Selectors
ID selectors are similar to class selectors, but they are prefaced by a pound sign (#)instead of a period. So, to select this div element:
<div id="main-content">
<p>This is the main content of the page.</p>
</div>
we would need a selector like this:
#main-content {width: 400px;}
or this:
div#main-content {width: 400px;}
Note: You may ask yourself why you’d ever need to join an element selector with an ID selector, since IDs are valid only once in each (X)HTML document. The answer lies in the fact that a single style sheet can be used over many documents. So, while one document may have a div element with the ID of content, the next might have a paragraph with the same ID. By leaving off the element selector, you can select both of these elements. Alternatively, you can ensure that only one of them is selected by using the element selector in conjunction with your ID selector.
HUE Designer 