HTML and CSS Reference
In-Depth Information
O
NLINE
http://htmlref.com/ch4/classselector.html
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>
