:not()などのCSS擬似クラスを複数設定する

CSS3から使えるようになった擬似セレクタ、
そのなかで「～以外」を指定できる:not()を複数指定する方法をご紹介します。

たとえば
.typeA または .typeB ではない親要素を持つものへスタイルを適用
というケースです。

:not()は、自分でHTMLとCSSをセットで設計する場合に使う機会はなかなかないのですが
既存のHTMLに手を加えることができず、CSSだけで見た目を変更しなければならない案件で使うことがあります。

なお、擬似クラスはIE8では使えませんのでご注意ください！
Internet Explorer 8では使えないCSS

:not()の基本的な使い方

たとえば、こんなHTMLがあり
文章の左右にはマージンを設けて、
見出し<h1>と、画面幅いっぱいの画像を入れる.wideView はマージンなしにしたい場合。

<div id="container">
	<h1>見出しテスト</h1>
	<div>
		<h2>見出しテスト</h2>
		<p>本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト</p>
		
		<h2>見出しテスト</h2>
		本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト
		本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト
	</div>
		
	<p class="wideView">
		<img alt="画面幅いっぱいの画像" src="/img/widePicture.png" />
	</p>
	<p>
		本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト
	</p>
</div>

こんなCSSを用意してみました。

#container>div:not(.wideView),
#container>p:not(.wideView) {
	margin: 1em;
}

が、このHTMLではうまく設定できたものの
同じCSSを読み込まなければならない別のHTMLで.wideViewのほかにもマージンをつけたくないパターンがでてきました。

<div id="container">
	<div class="section">
		<h2>見出しテスト</h2>
		<p>本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト</p>
	</div>
	<p>
		本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト本文テスト
	</p>
	<div class="noMargin">
		<img alt="画面幅いっぱいの画像" src="/img/widePicture.png" />
	</div>
</div>

:not()で複数の条件を指定する

なんとか.wideView または .noMargin 以外という指定ができないものか。
:not()で指定する条件を追加したい！
検索してみてもかんたんに見つからなかったので、とりあえず手探りで試してみた。

:not(条件1,条件2) カッコ内のカンマ区切り、失敗。

#container>div:not(.wideView,.noMargin),
#container>p:not(.wideView,.noMargin) {
	margin: 1em;
}

:not(条件1 条件2) カッコ内のスペース区切り、失敗。

#container>div:not(.wideView .noMargin),
#container>p:not(.wideView .noMargin) {
	margin: 1em;
}

正解は、擬似セレクタを2回指定する方法でした。
これで、.wideView または .noMargin 以外という指定ができました。なるほど。

#container>div:not(.wideView):not(.noMargin),
#container>p:not(.wideView):not(.noMargin) {
	margin: 1em;
}

Pocket

Share on Tumblr

:not()の基本的な使い方

:not()で複数の条件を指定する

関連記事