【CSS3】疑似否定クラス E:not(s)

Tweet

Category css 2015/11/10

問題

諸事情で、.hogeのpre要素 <pre class="hoge">...</pre> はあるスタイルシートを適用して、class属性のない素のpre要素 <pre>...</pre> には別のあるスタイルシートを適用したいです。

さらに、既存の別のclassが指定されているpre要素 <pre class="何か">...</pre> には影響を与えたくないです。

できますか。

答え

CSS3の「疑似否定クラス E:not(s) → セレクタsにマッチしない要素E」を使うとできる。

pre.hoge { /* .hoge に適用される */ }
p:not([class]) { /* class属性の指定がない素のpreに適用される。他のclass属性のある要素には影響しない。 */ }

IEは9以降なら対応している。

今どきのブラウザなら大丈夫。

CSS

#demo20151110 {border:1px solid #ccc; padding:1em;}
#demo20151110 p:not(.hoge) { color: red; }
#demo20151110 p:not([class]) { color: blue; }
#demo20151110 :not(p) { color: green; }

HTML

<div id="demo20151110">
	<p class="fuga">class="fuga" のP要素 → p:not(.hoge) にマッチ</p>
	<p class="hoge">class="hoge" のP要素 → どれにもマッチしない</p>
	<div>P要素ではない → :not(p) にマッチ</div>
	<p>class属性のない素のP要素 → p:not([class]) にマッチ</p>
</div>

DEMO

念のためイメージ

なお、#demo20151110 :not(p) { color: green; } を :not(p) { color: green; } とだけ書くと、上の親要素がマッチしたり、bodyもhtmlもマッチするので、ほとんど全部の文字が緑色になったりするので、使い方に注意。

以下も指定可能。

:not(:hover) {/*マウスが乗ってない（:notを使わなくてはならない状況が思いつかないけど）*/}
:not(:first-child) {/*最初の要素以外*/}
:not([href]) {/*href属性がない*/}
a:not([href*="example.com"]) {/*href属性にexample.comを含まない*/}
:not(.hoge-class) {/*.hoge-class以外*/}
:not(#hoge-id) {/*#hoge-id以外*/}
:not(.hoge-class):not(#hoge-id) {/*.hoge-classではなくて#hoge-idではない*/}

以下はCSS3の時点では指定不可。:not(セレクタ) には単純セレクタしか指定できない。結合子（スペース、>、+）のあるセレクタは指定できない。

:not(div p) {/*div の中の p … とはいかない*/}
:not(p > span) {/*p 直下の span … とはいかない*/}
:not(p + p) {/*p 直後の p … とはいかない*/}

否定なので、以下は何にもマッチしない。

:not(*) { color: #333; }

参考

:not() – CSS | MDN