HTML and CSS Reference
In-Depth Information
Universal Selectors
A
universal selector
matches the name of any element type on a web page (any elements regardless of the type).
The universal selector is referred to with an asterisk (
*
). Listing 5-18 shows an example.
Listing 5-18.
A Universal Selector Example
*
.caution {
color: #ff2318;
}
The asterisk can be omitted if the universal selector is not the only component of a simple selector (Listing 5-19).
Listing 5-19.
A Rule from Which the Asterisk Can Be Safely Omitted
.caution {
color: #ff2318;
}
Considering the markup shown in Listing 5-20, the selector
div * em
will match most
em
elements and apply
to the content of the
em
element in
h1
(
favorite
),
p
(
impressive
), the first
li
element (
hybrid electric
), and the
second
li
(
fuel efficient
). In the last two cases, the
*
matches the
ul
or the
li
.
Listing 5-20.
A Demonstration Markup for the Universal Selector
<body>
<div>
<h1>My <em>favorite</em> car</h1>
<p>The Lexus CT 200h is <em>impressive</em> due to the following reasons:</p>
<ul>
<li>It is a <em>hybrid electric</em> car.</li>
<li>It is a <em>fuel efficient</em> car.</li>
</ul>
That's why it is a nice <em>entry-level luxury</em> hatchback.
</div>
</body>
Since the
em
element with the content
entry-level luxury
is an immediate child of the
div
element, there is
nothing for the
*
to match between
div
and
em
.
■
Caution
the implementation of universal selectors is imperfect in Internet explorer 7 and earlier.
Attribute Selectors
Attribute selectors
select every element with the attribute specified within square brackets. An attribute type or an
attribute with a specific value can be styled with them. For example, all
img
elements with the
title
attribute within
the document can have a yellow border by applying the rule shown in Listing 5-21.
Search WWH ::
Custom Search