[CSS]否定疑似クラス「:not」の便利な使い方と使う時の注意点

例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。

否定疑似クラス「:not」の便利な使い方と使う時の注意点(特に優先順位)を紹介します。

サイトのキャプチャ

On :not and Specificity

以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

まずは、「:not」の各ブラウザのサポート状況。
2016年現在、どの環境でも特に問題なく、利用できると思います。

セレクタの各ブラウザのサポート状況

:not などセレクタの各ブラウザのサポート状況

「:not」の便利な使い方

否定疑似クラス「:not」は使い方が分かると、非常に便利です。
この疑似クラスは簡単に言うと、指定した属性を持っていない要素にターゲットを定めることができます。今までは複数行で記述していたコードもシンプルに、そして簡単に記述できます。

よくある例を見てみましょう。
リストの各アイテムの区切りにボーダーをつける時、最後のアイテムだけボーダーを無しにします。

「:not」を使ったコードは、「:last-child」ではない要素にボーダーを適用しています。
疑似クラス「:not」は、このように非常に便利な使い方ができます。

では、優先順位をつかった疑似クラス「:not」を見てみましょう。

私がこのコードを書いた時、nav a要素は下線を持っていないことに気がつきました。なぜこのような現象が起きるのか検証したいと思います。

CSSセレクタの優先順位 101

CSSセレクタの優先順位を把握することはなかなか複雑ですが、簡単な例から見ていきます。

上記のHTMLにスタイルを適用します。

同じ要素にターゲットを定めている複数のセレクタがある場合、セレクタの優先順位によって適用される属性が決定されます。その要因は、2つです。

  1. どんな種類のセレクタが使用されているか。
    3種類のセレクタがあります。

    1. idセレクタ(例: #bar)
    2. classセレクタ(例: .foo, :last-child)
    3. typeセレクタ(例: p)
  2. セレクタのそれぞれの種類と数。(例: idセレクタ1つとclassセレクタ1つなど)

この2つの要因を合わせて、セレクタの優先順位が決められます。上記の例を使って、優先順位がどのように計算されるか見てみましょう。

セレクタの優先順位

セレクタの優先順位

セレクタを比較する時、まずは最初の値(idセレクタの数)を比較します。idセレクタがより高い値であれば、優先順位も高いということになります。もしidセレクタでその値が等しい場合は、次の値(classセレクタの数)を比較し、さらに等しい場合はtypeセレクタを比較します。

上記の例では、「#bar」が「1-0-0」、「p.foo#bar」が「1-1-0」、idセレクタの値が同じで、classセレクタの値を比較し、優先順位が最も高いセレクタは「p.foo#bar」で、「color: yellow;」が適用されます。

次の例を見てみましょう。

セレクタの優先順位

セレクタの優先順位

idセレクタを使用しているセレクタが一つだけなので、classセレクタやtypeセレクタの値は無関係です。「#bar」が適用されます。

メモ

優先順位の計算は定義されたスタイルだけに適用されます。
インラインのスタイルは、すべてのセレクタベースのスタイルに優先されます。

「:not」を含む優先順位

「:not」自身は他の疑似クラスがそうであるように、優先順位の数に何も加えません。しかし、「:not」がセレクタの中にある時はそうではありません
下記のコードを見てみてください。

優先順位において「p:not(.foo)」は、「p」にclassセレクタを加えた状態と同じになります。

「p class="bar"」が、何色になると思いますか? 正しい答えはレッドではなく、グリーンです。

なぜなら「:not」を加えたということは、「p class="bar"」要素に「.notFoo」を加えたことと同じになります。

セレクタの優先順位

セレクタの優先順位

「:not」のスタイルは「p.bar」と同じ優先順位になりますが、記述の順番が後なので、「:not」のスタイルが優先されます。
記述の順番を入れ替えると、レッドが適用されます。

これは同様に「nav」の例でも説明できます。「:not」はネストされたtypeセレクタに勝ちます。

セレクタの優先順位

セレクタの優先順位

idセレクタがあると、ちょっとやっかいです。
p要素にclassセレクタを加えた「p:not(.foo)」と同様に、p要素にidセレクタを加えてみます。

今度は何色になると思いますか? 正しい答えは後に指定したレッドではなく、グリーンです。
優先順位を見てみましょう。

セレクタの優先順位

セレクタの優先順位

「p.bar」は記述の順番が後に定義されていますが、一つ目の「:not」の方にidセレクタがあるためこのようになります。

「:not」を使う時の注意点

この仕様は私が「:not」を使う方法を再考させました。
「li:last-child」のように、特定のルールを他より優先するよう記述の必要があるように思われますが、「:not」が同じことをするように思われます。

「:not」は多くの状況でスタイルがシンプルに記述できる方法なので、これからも私は使い続けるでしょう。その時には、以下の3つに注意します。

  • idセレクタと一緒に使わない(例: :not(#bar))
  • 一般的なtypeセレクタとは限定的に(例: div:not(.foo))
  • 必要があれば、優先されるように「:not」のスタイルは記述の順番で前に定義する。
サイトのキャプチャ

On :not and Specificity

top of page

©2016 coliss