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>
<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;}
<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>
Search WWH ::

Custom Search