>> English << | Português | По-русскиadultinternetusers > Tutorials > Surfing tutorial
>> Example 9 << | Prev | Next | Contents

Description


Sometimes we would like to distinguish between elements of the same name. In this case class attribute on these elements comes very handy. In stylesheet the required element is marked by its name, followed by "." and the value of class attribute.

>> Case 1 <<
HTML SourceSurfing stylesheet

<div> div: 000 </div>
<div class = "aaa"> div: aaa </div>
<div class = "bbb"> div: bbb </div>
<div class = "ccc"> div: ccc </div>
<p> p: 000 </p>
<p class = "aaa"> p: aaa </p>
<p class = "bbb"> p: bbb </p>
<p class = "ccc"> p: ccc </p>
body {background-color: white;  color: black}

div {color: white; background-color:navy}
div.aaa {color: aqua; background-color: green}
div.bbb {color: maroon; background-color: yellow}

p.aaa {color: green}
p.bbb {color: maroon}
p.ccc {color: purple}

Browser output