CSS3の否定疑似クラス「:not」と、疑似クラス「:last-child」「:first-child」を組み合わせて使うと、Webサイトのコーディングがとてもシンプルに書けるようになり、作業効率がアップします。
ソースコードのメンテナンス性も向上するので、積極的に使っていきたいテクニックです。
「:not」と「:last-child」「:first-child」のそれぞれの基本的な使い方から、実際のWebサイト制作でどのように使用するのか、詳しくご紹介していきます。
「:not」とは
「:not」とは、CSS3の否定疑似クラスです。
「○○以外の要素」を指定するといった使い方ができます。
例えば、
- 「1番目以外の要素」を青に
- 「3番目以外の要素」を赤に
- 「5番目以外の要素」を緑に
こんなことができちゃうんです。
色んな使い方ができそうですね。
「: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>
- <h3>は上に50px
- <h4>は上に30px
など、どのページも均等に余白を空けたい場合は以下のように指定するとスマートです。
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を打ち消す必要がなくなるので、とてもシンプルに書くことができます。