HTML and CSS Reference
In-Depth Information
Figure 3-22
Applying a contextual selector
style rule applied only to h1 headings
nested within section elemen
ts
◗
3.
Save your changes to the style sheet and then reload the
home.htm
file in your
Web browser. Verify that the sky blue background is applied only to the Welcome
heading.
Attribute Selectors
Selectors also can be defi ned based on attributes and attribute values associated with
elements. Two attributes,
id
and
class
, are often key in targeting styles to a specifi c
element or group of elements. Recall that the
id
attribute is used to identify specifi c ele-
ments within the Web document. To apply a style to an element based on its id, you use
the selector
#
id
where
id
is the value of the
id
attribute. Thus, to format the text of the
h1
heading
<h1 id=”main”>Sunny Acres</h1>
to appear in red, you could apply the following style rule:
#main {color: red;}
Because no two elements can share the same id value, HTML uses the
class
attribute
to identify groups of elements that share a similar characteristic or property. The attribute
has the syntax
A style rule involving an
id
selector has prece-
dence over any rule except
those defined within an
inline style.
<
elem
class=”
className
”> … </
elem
>
where
className
is the name of the element class. For example, the following
h1
head-
ing and paragraph both belong to the
intro
class of elements.
<h1 class=”intro”>Sunny Acres</h1>
<p class=”intro”>
Welcome to Sunny Acres, where there's always
something happening on the farm.
</p>
One reason to use the
class
attribute is to assign the same style to multiple elements
that belong to the same class. A selector based on a class has the form
You can associate a single
element with several
classes by listing each
class name, separated
by a space, as part of the
class
attribute value.
.
class
{
styles
}
where
class
is the name of the class and
styles
are styles associated with that class of
element. Thus, to display the text of all elements belonging to the
intro
class in blue, you
could apply the following style:
.intro {color: blue;}
Because different types of elements can belong to the same class, you can also specify
exactly which kinds of elements within that class receive the style rule by using the
selector
elem
.
class
{
styles
}