CSSで最初の要素以外をまとめて選択する方法：:not(:first-child)セレクターの使い方

CSSの:not(:first-child)セレクターを使えば、HTML文書内の最初の要素を除いた残りの要素をすべて選択できます。この記事では、基本的な使い方から実践的な活用例までわかりやすく解説します。

たとえば、以下のルールセットをCSSスタイルシートに追加すると、サイト全体のすべてのh2要素に64pxの上マージンが適用されます。

h2 {
    margin-top: 64px;
}

しかし、「サイト全体の最初のh2要素には上マージンを付けたくないが、それ以外のすべてのh2要素には付けたい」というケースではどうすればよいでしょうか。

:not(:first-child)セレクターを使う

次のルールセットをスタイルシートに追加しましょう。

h2:not(:first-child) {
    margin-top: 64px;
}

これで、各ページ(または投稿)の最初のh2要素を除き、サイト上の他のすべてのh2要素に対して、一貫して同じmargin-top値が適用されるようになります。

:not(:first-child)セレクターの具体的な活用例

Webサイトのタイポグラフィレイアウトを整えている場面を想像してみてください。記事の可読性を高めるため、すべてのh2見出しにmargin-top: 64px;を設定し、セクション間に十分な余白を持たせたいとします。

ところが、記事の先頭には雑誌やポスター風デザインの導入セクションがあり、カバー画像やオーバーレイ、その上に重ねられたさまざまなテキスト要素が配置されていることがあります。こうした導入部分では、複数の見出し要素(h1がタイトル、h2がキャッチコピーなど)を使うことも少なくありません。

このような場合、記事本文とまったく同じマージンやパディングの値を導入セクションに流用したくないはずです。:not(:first-child)セレクターを使えば、この問題をスマートに解決できます。

このセレクターはあらゆるHTML要素に使用できます。もう一つの定番の活用例が、ナビゲーションメニューに順序なしリスト<ul>を使うケースです。メニュー内のulには固有のスタイル(配置、ボーダー、配色など)を適用しつつ、サイトの他の部分への影響は避けたい――そんな場面で非常に便利です。

最近のCSSはクラスでのスタイリングが主流では?

現代のWeb開発では、要素セレクターによる直接のスタイリングを避け、クラスを使うのが一般的になっています。私自身もクラス派です。成長し続けるWebプラットフォームでは、クラスの方がスケーラブルで再利用性の高いCSSを書きやすいからです。

とはいえ、要素セレクターによる直接的なスタイリングにも、今なお存在価値があります。要素セレクターに対してベースラインとなるグローバルスタイルを設定しておけば、プロダクトのUI全体に自動的に一貫性と統一感をもたらすことができます。正しく運用すれば、反復的になりがちなUIスタイリングの工数を大きく削減できるでしょう。