HTML and CSS Reference
In-Depth Information
selector will only ever apply to a single element and its descendants.
An
ID
selector consists of a hash character followed by the
id
. In the
following example, an element matching the
ID
selector will reverse
the normal colors: white text on a black background instead of black
text on white.
#myelement {
color: white;
background-color: black;
}
In the markup, only the element with the
matching
id
attribute is selected:
<p id="yourelement">A paragraph</p>
<p id="myelement">Another paragraph</p>
By themselves,
ID
selectors aren't very useful. You certainly wouldn't
want to add an
ID
to every element you needed to style. They're nor-
mally used to pick out particular landmarks on a page. For a more gen-
eral-purpose approach, it's much better to use the class selector
discussed in the next section.
Class selectors
The class selector chooses elements based on the
class
attribute. Unlike
the
id
attribute, values in the
class
attribute don't have to be unique
throughout the document, so rules based on class selectors usually
apply to a selection of elements in a document. A class selector consists
of a period (
.
) followed by the class name and selects any element with
the value
myclass
in the
class
attribute:
.myclass {
color: white;
background-color: black;
}
In this example, only one of the paragraphs
has the
myclass
class:
<p class="myclass">A paragraph</p>
<p class="yourclass">Another paragraph</p>
