※本機能はIEでは未サポートなのでご注意ください。
<div class="nippon">
<div class="tokyo">東京</div>
<div class="kanagawa">神奈川</div>
<div class="osaka">大阪</div>
<div class="nagoya">名古屋</div>
</div>
div.tokyo{
background-color:red;
}
div.kanagawa{
background-color:lightskyblue;
}
div.osaka{
background-color:green;
}
div.nagoya{
background-color:aqua;
}
div.nippon{
background-color:yellow;
display: -webkit-box;　/* Safari,Goo

HTML側で下記のようにクラスを指定しておきます。
<div class="tokyo">
東京
</div>
<div class="kanagawa">
神奈川
</div>
<div class="osaka">
大阪
</div>
<div class="nagoya">
名古屋
</div>
スタイルシート側で、クラス毎にフォントサイズと背景色を適用できます。
div.tokyo{
font-size: 20px;
background-color:red;
}
div.kanagawa{
font-size: 20px;
background-color:blue;
}
div.osaka{
font-size: 20px;
background-color:green;
}
div.nagoya{
font-size: 20px;
background-color:aqua;

たとえば、
<div class="1">
東京都
</div>
で
div.1{
font-size: 100px;
background-color:red;
}
としても、反映されません。
<div class="sample1">
東京都
</div>
div.sample1{
font-size: 100px;
background-color:red;
}
のように、クラス名の頭文字を数字以外にすると反映されます。