CSS で第一子を選択しない方法
この記事では、CSS セレクターを使用して最初の子を選択しない方法を学習します。
:not(selector) セレクターを使用して CSS の最初の子を選択しない
:not(selector) セレクターを使用して、選択された要素ではない他のすべての要素を選択できます。したがって、CSS の最初の子を選択しないようにセレクターを使用できます。:not(selector) セレクターのセレクターとして:first-child を使用できます。このようにして、最初の要素を除く要素のすべての子孫にスタイルを適用できます。ここで、CSS セレクターレベル 3がサポートされているブラウザーでは、:not セレクターを使用できます。
たとえば、HTML で body タグを作成します。次に、3つの p タグを記述し、タグ間で選択したコンテンツを記述します。CSS で、body p:not(:first-child) を選択し、color を red に設定します。
ここで、以下のスニペットでは、本文に段落が含まれており、最初の段落を除いて、すべてのフォントの色が赤に設定されていることがわかります。したがって、最初の子を除くすべての子を選択して、スタイルを適用できます。ただし、:not セレクターには特定の制限があります（引数として単純なセレクターしか処理できないなど）。
コード例：
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
body p:not(:first-child) {
color: red;
}
CSS で最初の子を選択しないように:first-child セレクターを使用して最初の子を個別にスタイル設定する
:first-child セレクターを使用して以前に設定したルールをオーバーライドする特定のルールを設定できます。この手法により、最初の子を除くすべての子のスタイルを設定できます。:first-child セレクターを使用してスタイルをオーバーライドすると、最初の子が他の子とは異なって表示されます。
たとえば、最初のメソッドと同じ HTML 構造を使用します。CSS で、p タグを選択し、color を青に設定します。次に、最初の子を body p:first-child として選択し、color を black に設定します。
ここでは、最初の段落を除く段落のデフォルトのスタイルは color: blue として設定されていますが、:first-child セレクターを使用して color: black で上書きされます。したがって、:first-child セレクターを使用して、最初の子を選択しないようにすることができます。
コード例：
p{
color:blue;
}
body p:first-child {
color: black;
}
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
