CSSの「:not」は制作現場でどう使われるのか。実践的な使い方3選

CSS3の「:not」は様々なシーンで活用でき、使いこなせばソースコードをシンプルかつキレイに記述ができるようになります。
今回は制作現場で「:not」がよく使われるシーンを、具体例を挙げてご紹介していきます。

「:not」とは

「○○以外に適用する」といった指定ができる否定疑似クラスです。

li {
	color: red;
}
li:last-child {
	color: #333;
}

例えば、一番最後以外の要素に「color: red;」をかけたい時、今まではこういう指定をしていた方、

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

これだけで済むようになります。
「:not」を使えばこのように打ち消す必要がなくなるため、ソースコードをよりシンプルに記述することができます。

段落ごとに隙間を空ける

このように複数の段落に分かれた文章を載せる場合、段落ごとに隙間を空けたい時、
<p>タグすべてに「margin-bottom」をかけてしまうと、一番最後の<p>タグにも適用されてしまいます。
一番最後の<p>タグ以外にかけたい時は以下のように指定します。

HTML

<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキスト</p>

CSS

p:not(:last-of-type) {
	margin-bottom: 1em;
}

ナビゲーションの区切り線

ナビゲーションの区切り線は、一番最後には不要です。
そういったシーンにも「:not」が便利です。

HTML

<nav>
	<ul>
		<li><a href="#">nav01</a></li>
		<li><a href="#">nav02</a></li>
		<li><a href="#">nav03</a></li>
	</ul>
</nav>

CSS

nav ul {
	display: flex;
}
nav ul li:not(:last-of-type)::after {
	content: "";
	width: 1px;
	height: 15px;
	background-color: #999;
	margin: 0 2em;
	display: inline-block;
}

最後の<li>タグ以外に、「::after」をつけて表現しています。

フロー系

フロー系の表現をしたい時にも使えます。
「最後の要素以外に矢印をつける」といった指定をします。

HTML

<ul class="example">
	<li>STEP.01</li>
	<li>STEP.02</li>
	<li>STEP.03</li>
	<li>STEP.04</li>
</ul>

CSS

.example li {
	width: 100%;
	padding: 20px;
	border: 2px solid #333;
	text-align: center;
	position: relative;
}
.example li:not(:last-child) {
	margin-bottom: 40px;
}
.example li:not(:last-child)::before,
.example li:not(:last-child)::after {
	content: "";
	border: solid transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.example li:not(:last-child)::before {
	border-width: 22px;
	border-top-color: #333;
}
.example li:not(:last-child)::after {
	border-width: 20px;
	border-top-color: #fff;
}

まとめ

他にも様々なシーンで使えると思いますが、WEBサイトの制作で頻繁に使用3つをご紹介しました。
ソースコードはできるだけシンプルであるに越したことはありません。
「:not」を使えば不要なコードを減らすことができるので、積極的に使いましょう。