同じタイプのセレクタが数多く並び、カテゴリーなどで分けてスタイルを変更する場合、すべてに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;
	   }

 

サンプル

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

ダミーテキストダミーテキストダミーテキストダミーテキスト

戻るボタン