同じタイプのセレクタが数多く並び、カテゴリーなどで分けてスタイルを変更する場合、すべてにclassを指定していくのはとても面倒です。

サンプル（最下段）は、p要素が数多く並び、特定のdiv要素（class="test"）の子要素のみにスタイルの変更を適用します。幾つかの子要素にはclassを付けて適用、それ以外の子要素にはclassを付けずに簡略化して適用します。その際、p要素全体のスタイルを変更すると、div要素（class="test"）に含まれないp要素も変更されてしまうため、NGとします。

サンプルのhtmlソース

<div id="sample01">
    <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <div class="test">
        <p class="type1">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p class="type2">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        <p class="type1">ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    <p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>

 

CSSは、div要素（class="test"）の子要素（ボールド）のうち、2種類のclass（赤色文字と紫色文字）と、「p:not([class])」でclassを否定= classを持たないもの（緑色文字）という形で指定しています。

サンプルのCSSソース　" p:not([class]) "

   .test  {
	   font-weight:bold;
	   }
   .test p.type1  {
	   color:red;
	   }
   .test p.type2  {
	   color:#90a;
	   }
   .test p:not([class])  {
	   color:green;
	   }

 

サンプル