CSS3 SubClass-ing

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1.a {color:red; text-align:left;}
h1.b {color:green; text-align:right;}
p {color:blue; text-align:center;}

.area1
{ border:5px solid green;}
.area1 .item
{ color:red;}
.area2
{ border:3px solid blue;}
.area2 .item
{ color:blue;}

</style>
</head>

<body>
<h1 class='a'>This is a heading</h1>

<h1 class='b'>This is a heading</h1>

<p>This is a paragraph.</p>

<div class="area1">
<table>
<tr>
<td>Text Text Text</td>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
<div class="area2">
<table>
<tr>
<td>Text Text Text</td>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>

</body>

</html>