知られていないCSSのコツ : 疑似クラス:not()！

こんにちは！

フェノメナ、技術担当のレミです。

今回はCSSの疑似クラス（pseudo class）である「:not()」について紹介します。

あまり知られていない疑似クラスではありますが、とても便利です。

ブラウザ対応を心配される方も少なくないとは思いますが、それについては最後にお話します。

:notの使い方

:not()は、「〜ではない」ものを選択する、CSS３から導入された疑似クラスです。

例えば、「classのないリンク」を別の色で指定したい場合は :

a:not([class]) { color: red; }

また、例えば、「.first-hogeクラスがついていないリストのアイテム」の場合は:

> HTML
<ul> <li class="first-hoge">これは</li> <li>Phenomena</li> <li>の</li> <li>ブログ</li> <li>です。</li> <ul>

> CSS
li { color: black; } li:not(.first-hoge) { color: blue; }

また、:not疑似クラスをchainで使うこともできます。それは「こうでも、こうでもない」という場合の意味ですね。

例えば、IDをもっていない、且つclassもないエレメント :

div:not([class]):not([id]) { /* クラスもIDもないときの処理 */ }

2016年の6月の状況では、95％のユーザがこのCSSを対応するブラウザを使っています。対応しないブラウザはIE6、Firefox 2と3、Safariの3.1という、かなり古いブラウザです。

また、IE7とIE8に関しては、対応はしますが、期待した動きにならなかったり、バグがあったりするとされているので、十分テストする必要があります。

今後は徐々に:not()の様な便利なCSSが使えるようになるので、是非ブラウザ対応を確認しつつ使って行って頂ければと思います！