HTML and CSS Reference
In-Depth Information
The previous example has three elements, each of which has its class attribute set to
“veryimportant.” According to the style sheet information, all members of the “veryimportant”
class have a yellow background color:
Other variations on class rules are possible. For example, setting all h1 elements of the
class “veryimportant” to have a background color of orange could be written like this:
h1.veryimportant {background-color: orange;}
In some ways, you can think of a class rule with a wildcard selector like
*.veryimportant {background-color: orange;}
as being the same as the commonly used class selector
.veryimportant {background-color: orange;}
While this is syntactically correct, it doesn't add much understanding. More interesting and
quite underused is the possibility in selectors to combine classes together directly. For
example, consider the following rule:
h1.veryimportant.stuff {background-color: green;}
This would match only <h1> tags with class attribute values including “veryimportant”
and “stuff.” Given these rules, the following tags with class attributes would be affected in
the various ways indicated:
<h1 class="veryimportant"> Has an orange background </h1>
<h1 class="veryimportant dummy"> Has an orange background </h1>
<h1 class="veryimportant stuff"> Has a green background </h1>
<h1 class="veryimportant dummy stuff"> Has a green background </h1>
<h1 class="dummy"> Default background unless class rule for dummy set </h1>
Search WWH ::

Custom Search