CSS｜『:not』とlast-child、first-childを併用するとコーディングが捗る

CSS3の否定疑似クラス「:not」と、疑似クラス「:last-child」「:first-child」を組み合わせて使うと、Webサイトのコーディングがとてもシンプルに書けるようになり、作業効率がアップします。

ソースコードのメンテナンス性も向上するので、積極的に使っていきたいテクニックです。

「:not」と「:last-child」「:first-child」のそれぞれの基本的な使い方から、実際のWebサイト制作でどのように使用するのか、詳しくご紹介していきます。

「:not」とは

「:not」とは、CSS3の否定疑似クラスです。
「○○以外の要素」を指定するといった使い方ができます。

例えば、

こんなことができちゃうんです。
色んな使い方ができそうですね。

「:not」の記述方法

:not(セレクタorクラス) {
	指定したセレクタorクラス以外に適用したいCSS
}

「:not」の後ろに、除外したいセレクタもしくはクラス名を指定します。

セレクタで指定する例

<ul class="example">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

<li>が5つ並んだHTMLです。
「3番目以外の<li>」を赤色にしてみます。

.example li:not(:nth-child(3)) {
	background: red;
}

CSSはこのように書きます。

3番目以外の<li>が赤色になりました。

クラスで指定する例

<ul class="example">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li class="not">4</li>
	<li>5</li>
</ul>

次は「4番目以外の<li>」を赤色にしてみます。
HTMLでは、4番目の<li>に「class=”not”」を指定しています。

.example li:not(.not) {
	background: red;
}

CSSはこのように書きます。

4番目以外の<li>が赤色になりました。

「:not」+「:last-child」の使い方

「:last-child」は、最後の要素を指定する疑似要素です。

:last-child {
	最後の要素に適用したいCSS
}

「:last-child」を単体で使う場合はこのように書きます。

「:not（○○以外の要素を指定）」と「:last-child（最後の要素を指定）」を組み合わせると…
「最後の要素以外」にCSSを適用することが可能になります。

:not(:last-child) {
	最後の要素以外に適用したいCSS
}

このように記述します。
実践的な使い方は後述します。

「:not」+「:first-child」の使い方

「:first-child」は、最初の要素を指定する疑似要素です。

:first-child {
	最初の要素に適用したいCSS
}

「:first-child」を単体で使う場合はこのように書きます。

「:not（○○以外の要素を指定）」と「:first-child（最初の要素を指定）」を組み合わせると…
「最初の要素以外」にCSSを適用することが可能になります。

:not(:first-child) {
	最初の要素以外に適用したいCSS
}

このように記述します。
実践的な使い方は後述します。

実践的な使い方

使い方が分かっても、どう使えば便利なのかいまいちピンとこないですよね。
Webサイト制作に便利な「:not」+「:last-child」の具体的な使い方をいくつかご紹介します。

見出しの上に隙間を空ける

Webサイトを制作する上で数えきれないほど使用する見出しタグ（<h1>～<h6>）。
文章を読みやすくするために、見出しの上には余白を空けたい場合が多いと思います。

↑<h2>

↑<h3>

など、どのページも均等に余白を空けたい場合は以下のように指定するとスマートです。

h2:not(:first-child) {
	margin-top: 50px;
}
h3:not(:first-child) {
	margin-top: 30px;
}

「:first-child」を除外する理由

<h2>タイトル</h2>
<p>テキストテキストテキスト</p>

<h2>タイトル</h2>
<p>テキストテキストテキスト</p>

このように見出しが連続した場合は、きちんと<h2>の上に50pxの余白が空きます。

<section>
	<h2>タイトル</h2>
	<p>テキストテキストテキスト</p>

ではこんなケースの場合はどうでしょうか。

単に<h2>に「margin-top: 50px;」を指定するだけだと、余白を空ける必要のない、1番初めの<h2>にまで影響してしまいます。

そのため、「first-child」を除外することで1番初めの<h2>のみ「margin-top」が効かないようにしています。

「:first-child」を除外することであらゆるページの構成に対応できるようになります。

すべての子要素同士の隙間を空ける

例えば、
<p>と<p>が連続した時、
<div>と<div>が連続した時、
<p>と<div>が連続した時
など、当たり前のようにあるシーンですが、それぞれの要素同士に隙間を空けたい場合。

1つひとつに「margin-bottom」をかけるのはとても手間なので、子要素すべてに一括で指定します。

<main>
	<p>aa</p>
	<div>aa</div>
	<ul>aa</ul>
	<p>aa</p>
</main>

HTMLは、メインコンテンツすべてを<main>タグで囲います。

main *:not(:last-child) {
	margin-bottom: 20px;
}

これで、すべての子要素同士の間に「20px」の隙間が空くようになります。
一番最後の要素には隙間が空きません。

<main>タグを使用していない場合は「main」部分を「body」などの大元の要素に変更します。

「:last-child」を除外する理由

実際にWebサイトを構築しているとわかるのですが、文章の最後の段落や、セクション内の最後の要素には「margin-bottom」は不要なケースがほとんどです。

そのため、一番最後にくる要素にはmargin-bottomをかけないことで、余計な隙間が空くことがなくなります。
Webサイトの制作時にはとりあえずかけておくとコーディングが楽になります。

要素の横並び

サイトの幅が「1000px」に設定されているとします。
子要素の幅がそれぞれ「300px」、隙間を「50px」空けたいとします。

marginで隙間を空けますが、最後の要素にも適用されると「1000px」に収まらなくなってしまいます。

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

HTMLはこちら。
今回は<li>で組んでいますが、どの要素にも使用できます。

ul li:not(:last-child) {
	margin-right: 50px;
}

CSSはこのように記述します。
最後の要素以外に「margin-right: 50px;」が掛かるようになっています。
これで1000pxからはみ出ることはなくなりますね。

この方法は「:first-child」に置き換えても同じことができます。
その際は「margin-right」を「margin-left」に変更する必要があります。

まとめ

「:not」と「:last-child」、「first-child」を組み合わせた使い方をご紹介しました。
他にも様々な使用シーンはありますが、基本的にはやり方は同じです。

この方法で書けば、CSSを打ち消す必要がなくなるので、とてもシンプルに書くことができます。