CSS3で追加されたセレクタ「:not()」について考えてみました

CSSセレクタって何だという方はこれらの記事が役に立つと思います。

• 意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
• 保存版！CSS3セレクタの説明書｜Webpark

では、「:not()」について考えてみます。これから紹介する簡単なサンプルたちはWindows7のChromeで動作確認しています。他のブラウザの場合うまく対応していない場合も考えられますのでご注意ください。

「:not()」の基本

Selectors Level 3では、「E:not(s)」という風に説明されています。日本語で説明すると、「sでないセレクタを持つE要素」という感じになります。

また、「Negation pseudo-class」というグループに属しています。日本語にすると「否定擬似クラス」というのが一般的で、「否定擬似クラス」は草案段階のSelectors Level 4においても「:not」以外にありません。

CSS3ということで敬遠される方もいるかもしれませんが、セレクタは比較的簡単に対応できます。詳しくはこちらをご覧ください。

では、実際の使い方を簡単なサンプルで説明します。

:not(h1) { color: red; }

h1要素ではない要素に適用されます。もう少し使えそうなサンプルを説明します。

p:not(.sample) { color: red; }

p要素でsampleというクラスが付いていないものに適用されます。これだと何かに使えそうです。

「E:not(s)」のEはなくてもいい

先ほどの2つのサンプルは、「:not(h1) 」と「p:not(.sample)」ということで、「E:not(s)」のEの部分があるものとないものがありました。

Eの部分はあってもなくても構いません。「:hover」擬似クラスの場合、「a:hover」のように前に付けないと動かない気がしそうですが実はちゃんと動きます。

:hover { color: red; }

この場合、マウスを乗せた要素ならどの要素にでも適用されます。

「E:not(s)」のsに入るもの

今までのサンプルは、「E:not(s)」のsの部分に要素名で表すタイプセレクタを入れていましたが、擬似セレクタや属性セレクタを入れることもできます。

では、このような場合はどうでしょうか。

a:not(:hover) { color: blue; }

a要素でマウスを乗せていないものに適用されます。これだけだとあえてnotを使う意味がありません。例えば下のCSSを見てください。

a { color: red}
a:not(:hover) { color: blue; }

元々のa要素の色は赤に、マウスを乗せていないa要素は青になります。すなわちマウスを乗せたa要素だけ赤になります。わざわざnotを使わなくても下のようにすればいいですね。

a { color: blue}
a:hover { color: red; }

元々のa要素の色が青で、マウスを乗せたときは赤になります。わざわざnotを使う必要はないですね。

どのような使い方が有効か

では、どのような使い方が有効か。次のような使い方はどうでしょうか。例えば次のようなHTMLがあります。

<div id="sample">
  <p>サンプル1</p>
  <p>サンプル2</p>
  <p>サンプル3</p>
  <p>サンプル4</p>
  <p>サンプル5</p>
<div>

で、CSSを次のようにします。

#sample:hover p:not(:hover){
  opacity: 0.5;
}

この場合はsampleというid名を持つ要素にマウスを乗せたときに、その子要素のなかでマウスを乗せていないものが半透明になります。

言葉で表すとややこしいですね。以下のサイトで紹介されているサンプルはこの方法を使っています。

これもnotを使わずに書くこともできます。

#sample:hover p{
  opacity: 0.5;
}
#sample:hover p:hover{
  opacity: 1;
}

このサンプルの場合、notを使った方がコードがシンプルですし、見た感じにも分かりやすいと思います。

:hover以外の擬似クラスも大丈夫

:hoverの例で説明しましたが、それ以外の擬似クラスも使えます。

#sample:hover :not(:first-child){
  color:red;
}

sampleというid名を持つ要素にマウスを乗せたときに、最初の子要素以外に適用されます。

このように:hover以外の様々な擬似クラスが使うことができます。擬似クラスについては、CSS3で大幅に拡張されていますので、覚えきれていない方はこちらをご参考に。

ちなみにこういうのも大丈夫です。

a:not(:hover):nth-child(2n){
  color:red;
}

ややこしいですが、マウスが乗っていないa要素の中で偶数番目にあるものに適用されます。

属性セレクタも使えます

属性セレクタでも大丈夫です。

a:not([href*="example.com"]){
  color:red;
}

リンク先のアドレスに「example.com」を含まれる場合以外のa要素に適用されます。自サイト以外の外部リンクにアイコンを付けるときなどに使えそうです。

いったん全てのリンクにアイコンを付けて、自サイトのアドレスが含まれているリンクにはアイコンを表示しない、という方法もありますが、こちらの方がシンプルで分かりやすいと思います。

クラスやidでも大丈夫

もちろんクラスやidでも大丈夫です。

a:not(#sample){
  color:red;
}

sampleというid名がついている要素以外のa要素に適用されます。

続けても大丈夫

notを続けて書くことでさらに条件をつけることができます。

a:not(:first-child):not(:last-child){
  color:red;
}

最初の子要素でも最後の子要素でもないa要素に適用されます。

「E:not(s)」のsに入れられないもの

CSS3セレクタの時点で「E:not(s)」のsに入れられるのは単純セレクタのみです。単純セレクタとは「 」や「>」や「+」などの結合子がないセレクタです。ということで、sの部分に結合子が入ると動きません。

:not(li a) {
  color:red;
}

liの子要素であるa要素以外となればいいのですが、CSS3の時点ではうまく動きません。これについては、CSS4セレクタで対応可能になる予定です。とはいうもののCSS4自体策定中で内容はまだ定まっていません。ブラウザの対応もまだ少し先になりそうです。

さいごに

兄弟関係の弟要素に適用するCSSセレクタはありますが、兄要素に適用するセレクタはありません。で、なんとかして兄要素に適用する方法がないか考えているなかで、notは使えるのではないかと思い勉強を始めたわけですが、やっぱりダメでした。

jQueryを使えばいいわけなんですが、なんか意地になって考えてみました。結局できませんでしたが。。けど、CSS4で結合子が使えるようになればできると思います。

ということで無理やり結論。

• notを使えばシンプルにコードを書ける場合がある
• 絶対にnotが必要という場面は思いつかなかった
• 結合子が使えれば便利になるはず

個人的には外部リンクの例なんかはnotを使った方がいいのかなと思います。他にいい使い方が思いついたら、また記事にしたいと思います。