CSS セレクター: 指定されたクラスの最初の要素を取得します

Question

クラス名 red を持つ要素が多数ありますが、次の CSS ルールを使用して class="red" を持つ最初の要素を選択できないようです:

リーリー リーリー

このセレクターの何が問題なのでしょうか?クラス red の最初の子をターゲットにするように修正するにはどうすればよいですか?

Answer 1

:first-child セレクターの目的は、名前が示すように、親タグの最初の子タグを選択することです。したがって、この例は機能します (ここ で試してみただけです): リーリー

ただし、タグを別の親タグの下にネストしている場合、または red クラス タグが親タグの下の最初のタグではない場合、この方法は機能しません。

また、これはドキュメント全体の最初のタグに適用されるだけでなく、そのタグを囲む新しい親タグがあるたびに適用されることにも注意してください。例:

リーリー

first と third は赤になります。

あなたの場合、:nth-of-type セレクター:

を使用できます。

リーリー リーリー

このメソッドを含む回答を削除した Martyn に感謝します。

:nth-child() および :nth-of-type() の詳細については、http://www.quirksmode.org / をご覧ください。 css/nthchild.html。

これは CSS3 セレクターであるため、一部の古いバージョンのブラウザー (IE8 以前など) は期待どおりに機能しない可能性があることに注意してください。詳細については、https://caniuse.com/?search=nth-of-type をご覧ください。

Answer 2

これは、作者が :first-child の仕組みを誤解している最も有名な例の 1 つです。 CSS2 で導入された :first-child 擬似クラスは、親 の最初の子を表します。それでおしまい。複合セレクターの残りの部分で指定された条件に一致する最初の子要素が選択されるという非常によくある誤解があります。セレクターの動作方法 (説明については ここ を参照) により、これは単純に真実ではありません。

セレクター レベル 3 では、要素型の兄弟の中で最初の要素を表す

:first-of-type 疑似クラス が導入されます。 この回答では、:first-childと:first-of-typeの違いを画像とテキストで説明します。ただし、:first-child と同様に、他の条件やプロパティは調べません。 HTML では、要素の種類はタグ名で表されます。質問では、タイプは p です。 残念ながら、特定のクラスの最初の子要素に一致する類似の

:first-of-class

疑似クラスはありません。この回答が最初に投稿されたとき、 新しくリリースされた FPWD セレクター レベル 4 では、既存のセレクター メカニズムを中心に設計された :nth-match() 疑似クラス が導入されました。最初の段落で説明したように、セレクター リスト パラメーターを追加することで、残りのセレクター複合セレクターを提供して、目的のフィルター動作を取得できます。近年、この機能 は :nth-child( ) 自体 に組み込まれ、セレクター リストはオプションの 2 番目の引数として表示され、物事を簡素化し、 を回避します。 nth- match() ドキュメント全体で一致しているという誤った印象 (以下の最後のコメントを参照) . クロスブラウザのサポート

を待っている間 (真剣に言うと、もう 10 年近く経ちますが、過去 5 年間で実装されたのは 1 回だけです)、回避策は次のとおりです

Lea Verouそして私は、最初にそのクラスの すべての 要素に必要なスタイルを適用することによって、独立して開発しました (彼女が最初にそれを行いました!)。 リーリー ...次に、 を使用して、ルール ~

: 内の汎用兄弟コンビネータをオーバーライドします。 リーリー これで、class="red" を持つ最初の要素のみに境界線が付きます。

ルールを適用する方法については次のとおりです:

リーリー リーリー