CSSを使用して最初の要素を除くすべての要素を選択する方法：not（：first-child）セレクター

CSS `:not(:first-child)を使用して最初の要素を除くすべてのHTML要素を選択する方法を学びます セレクタ。

次のルールセットをCSSスタイルシートに追加すると、Webサイト全体のすべてのh2要素の上部マージンが64ピクセルになります。

h2 {
    margin-top: 64px;
}

しかし、一般的にWebサイトの最初のh2要素にそのトップマージンを与えたくないが、他のすべてのh2要素に与えたくない場合はどうでしょうか。

：not（：first-child）セレクターを使用する

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

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

これで、各ドキュメント（ページ/投稿）の最初のh2要素を除いて、Webサイトのすべてのh2要素が一貫して同じマージントップ値を取得します。

：not（：first-child）セレクターのユースケース

ウェブサイトの活版印刷のレイアウトをスタイリングしているとしましょう。すべての記事のh2 見出し要素には、margin-top: 64px;が必要です。 セクション間にいくらかの呼吸の余地を与えるため。

ただし、すべての記事の上部には、表紙の画像、オーバーレイ、さまざまなテキスト要素が上部にある雑誌/ポスタースタイルのイントロセクションがあります。その場合、いくつかの見出し要素（h1）を使用できます。 タイトルはh2 タグラインなど）。

その場合、記事内とまったく同じ間隔の値（マージン/パディング）をイントロセクションで使用することはおそらく望ましくありません。 :not(:first-child)を使用する セレクター、あなたはその問題を取り除きます。

このセレクターは、すべてのHTML要素で使用できます。もう1つの一般的な使用例は、順序付けされていないリストを使用する場合です<ul> あなたのメニューのために。 ulに追加したい非常に特殊なスタイルがある場合があります メニューにはありますが、サイトの他の部分（配置、境界線、色など）にはありません。

CSSは今、クラスを使ったスタイリングだけではありませんか？

最近のWeb開発では、要素セレクターを直接スタイリングすることを避けるのが一般的です。ほとんどがクラスを使用します 今。私もクラスのファンです。クラスを使用すると、成長するWebプラットフォームでスケーラブルで再利用可能なCSSを簡単に作成できるからです。

ただし、ダイレクトセレクターのスタイリングにはまだその場所があります。要素セレクターに直接ベースライン/グローバルスタイルを確立して、製品UIを通じて一貫性と均一性を自動的に浸透させるのが実用的です。このアプローチにより、適切に実行された場合に、繰り返しのUIスタイリングを大幅に節約できます。