HTML and CSS Reference
In-Depth Information
In addition to the problems of inflexibility, ID selectors also have the problem of very high
specificity—an issue we'll be talking about later in this chapter.
Class Selector
The class selector is the most useful of all CSS selectors. It's declared with a dot preceding a
string of one or more characters. Just as is the case with an ID selector, this string of charac-
ters is defined by the developer. The class selector also matches all elements on the page that
have their class attribute set to the same value as the class, minus the dot.
Take the following rule set:
.box {
padding: 20px;
margin: 10px;
width: 240px;
}
These styles will apply to the following HTML element:
<div class="box"></div>
The same styles will also apply to any other HTML elements that have a class attribute with
a value of
box
. Having multiple elements on a single page with the same class attribute is
beneficial, because it allows you to reuse styles, and avoid needless repetition. In addition to
this, class selectors have very low specificity—again, more on this later.
Another reason the class selector is a valuable ally is that HTML allows multiple classes to
be added to a single element. This is done by separating the classes in the HTML class attrib-
ute using spaces. Here's an example:
<div class=”box box-more box-extended”></div>
Descendant Combinator
The descendant selector or, more accurately, the descendant
combinator
lets you combine
two or more selectors so you can be more specific in your selection method. For example:
