トップページの中の セレクタの中の 否定擬似クラス (E:not(s))

否定擬似クラス (E:not(s))

  • 最終更新:2009年9月 6日 15:15

CSS3で定義された否定疑似クラスは、特定のセレクタ以外のセレクタに適用されるセレクタです。
例えば、同じp要素でもこの指定がされたp要素には適用させたくない!といった場合に使っていけます。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8未対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

否定擬似クラスのサンプル

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"以外は、リセットさせる事ができます。
ブラウザのデフォルトのスタイルを活かしたりすることが出来るかと思います。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ