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
<h1>My <em>favorite</em> car</h1>
<p>The Lexus CT 200h is <em>impressive</em> due to the following reasons:</p>
<li>It is a <em>hybrid electric</em> car.</li>
<li>It is a <em>fuel efficient</em> car.</li>
That's why it is a nice <em>entry-level luxury</em> hatchback.
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 .
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