否定擬似クラス (E:not(s))
CSS3で定義された否定疑似クラスは、特定のセレクタ以外のセレクタに適用されるセレクタです。
例えば、同じp要素でもこの指定がされたp要素には適用させたくない!といった場合に使っていけます。
- 対応ブラウザ
-
否定擬似クラスのサンプル
ul:not([class]) li {
margin: 0 0 5px;
padding: 0 0 0 15px;
background: url(../img/item/mark_basic.gif) no-repeat left center;
list-style-type: none;
}
<ul>
<li>テキスト</li>
<li>テキスト</li>
</ul>
<ul class="menu">
<li>テキスト</li>
<li>テキスト</li>
</ul>
class属性が付いていないul要素内のli要素に基本となる指定をして、何らかのclass属性が付いているul要素内のli要素にはデフォルトのままのスタイルを適用させています。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
- テキスト
- テキスト
この指定により、ユニバーサルセレクタで全ての要素のmarginプロパティとpaddingプロパティの値を0
にしていて、メインコンテンツ部分にはメイン用の基本的なスタイルを適用させているが、class属性が付いている要素には基本的なスタイルを適用させたくない場合などに使って行けます。
また、逆にユニバーサルセレクタで特定の要素などをリセットしたくない場合は以下のように書く事で可能です。
*:not([type="text"]) {
margin: 0;
padding: 0;
border: 0;
}
これで、type="text"
以外は、リセットさせる事ができます。
ブラウザのデフォルトのスタイルを活かしたりすることが出来るかと思います。