HTML and CSS Reference
In-Depth Information
Notice that the rule for green background matches any
<h1>
tag that includes the
class
values “veryimportant” and “stuff” but not necessarily uniquely or in order. If you are
looking to write a rule that matches any single occurrence of a particular group of class
values, then the comma operator is in order. For example, separating the following three
class names by commas
.larry, .curly, .moe {color: red;}
would mean that any element with a single occurrence or more of these
class
values would
be set as red.
The following is a complete example showing multiple class rules working together:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
Multiple Class Selector Example
</title>
<style type="text/css" media="all">
.heading {font-family: Impact, Sans-Serif;}
.veryimportant {background-color: yellow;}
.stuff {color: red;}
.veryimportant.stuff {font-style: italic;}
.veryimportant.example.stuff {text-decoration: underline;}
</style>
</head>
<body>
<h1 class="veryimportant heading stuff">
Heading (yellow background, red
text, italic, and Impact)
</h1>
<p class="veryimportant">
This is the first paragraph. (yellow background,
black text)
</p>
<p class="stuff">
This is the second paragraph. (red text, default
background)
</p>
<p class="veryimportant stuff">
This is the third paragraph.
(yellow background, red text, italic)
</p>
<p class="stuff veryimportant example dummy">
This is the fourth paragraph.
(yellow background, red text, italic, underlined)
</p>
</body>
</html>
O
NLINE
http://htmlref.com/ch4/multiclassselector.html
