CSSは親要素の下の最初の子要素を選択します（:first-child）

序文

最近、プロジェクトで :first-child を使用したのですが、すぐに思いつきました。これは最初の要素を選択するだけではないでしょうか?

非常に便利なようで、日常的な使用では特に問題に遭遇することはありません。当然、親要素の下の最初の要素のみが選択され、孫やひ孫の要素には影響がないと考えます。結局私は間違っていたことが判明しました。

E:first-child の最初の誤解 (指定した領域の 1 つだけが選択され、孫やひ孫の要素がいくつあるかは調べられません)

<!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
本文 p:first-child
{
背景色:黄色;
}
</スタイル>
</head>
<本文>

<p>この段落は、親要素 (本文) の最初の子です。 </p>

<h1>私のホームページへようこそ</h1>
<p>この段落は親の最初の子ではありません。 </p>

<div>
<p>この段落は、親 (div) の最初の子です。 </p>
<p>この段落は親の最初の子ではありません。 </p>
</div>

<p><b>注意:</b> IE8 以前のブラウザの :first-child では、<!DOCTYPE> 宣言が必要です。 </p>

</本文>
</html>

上記のコードは本当に 1 つの p タグでのみ機能しますか?

これは、body p:first-child が最初の要素を選択すると考えるという、私たちが犯した最初のよくある誤解です。

実際、この p が選択した body 内の親要素の最初のものである限り、選択されます。

E:first-childの2番目の誤解（このE要素の前に何人の兄弟がいても、私が最初のE要素である限り、私は効果を発揮します）

上記のコードのままですが、body の p タグの前に font タグを追加したところ、p が無効であることがわかりました。
上記の 2 つの例は、このセレクターの使用方法を明確に示しています。

:first-child は、親要素の最初の子要素を選択するセレクターです。

指定した要素のサブ要素のみを選択するにはどうすればよいですか?孫やひ孫が何人いるかは言うまでもありません。

子セレクター（>）：孫、ひ孫などを除いた、特定の要素の子（直接の子）である要素のみを選択できます。上記のコードを例として、>を追加して効果を試してください。

間違ったセレクターが使用されているにもかかわらず、エラーが報告されないことがあります。しかし、間違っていることは間違っている。発見される時が必ず来ます。
この間違いから何かを学べてよかったです。

親要素下の最初の子要素を選択する CSS (:first-child) に関するこの記事はこれで終わりです。親要素下の最初の子要素を選択する CSS に関するより関連性の高い記事については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Dockerイメージ作成の完全なプロセス

>>: CSS 向け SASS スタイルプログラミングガイド