最初の子である CSS セレクター (first-child) を使用すると、最初の要素のスタイルを他の要素に直接適用できます。 CSS セレクター レベル 3 仕様によれば、このクラスは、コンテンツのスタイルをその親および兄弟コンテンツとの関係に基づいて決定するため、構造擬似クラスと呼ばれます。
構文
:first-child { //property } 例
h1:first-child { color: blue; } <p> <span>Let's get started</span></p> 出力
PowerShell の Runas
説明：
CSSの中央の画像
- 上記のコードでは、2 つの div タグが body ブロックを構成しています。
- 段落タグがたくさんあります
最初の div 要素内にさまざまなスナップ タグが含まれています。
- ヘッダータグと段落タグ
snap タグを持つものは両方とも他の div タグ内に含まれます。
- head ブロック内に内部または埋め込み CSS を適用し、段落タグ内のスナップ タグのスタイルを設定しました。ただし、スナップ タグのクラスを作成する必要はありません。代わりに、最初の子セレクター (p:first-child) を使用して、最初の div タグ内の最初のスナップ タグ要素を即座に識別できます。最初の要素 (スナップ) に何らかのスタイルを与えることができます。段落内には 2 つのスナップ タグがありますが、見てわかるように、最初のタグのみがスタイル設定され、他のタグは無視されています。
- 最初の子がどのように最初の snap タグを検索し、2 番目の div タグでスタイルを設定したかがわかります。この要素は、最初の子のターゲットとなる親タグ内の兄弟要素の中で最初の要素である必要があります。そうしないと選択されません。
を使用して、行タグ
行タグの使用
構文
ローマ数字 1 から 100
tr:first-child{ //CSS declarations with style properties; } 例
理解を深めるために、row タグを使用した最初の子 CSS の例を見てみましょう。
Example of First Child in CSS using row tag tr:first-child { font-size: 40pixels; color: black; background-color: lightblue; } <table class="table"> <tr> <th>Name</th> <th>ID</th> <th>Branch</th> </tr> <tr> <th>Priya</th> <th>123</th> <th>CSE</th> </tr> <tr> <th>John</th> <th>435</th> <th>ECE</th> </tr> <tr> <th>David</th> <th>544</th> <th>MECH</th> </tr> <tr> <th>Sushma</th> <th>765</th> <th>CIVIL</th> </tr> </table> 出力
説明：
- 上記のコードのボディ ブロックには、学生情報のテーブル タグが含まれています。
。
- タグが数行あります
テーブルタグ内 、最初の行のタグには、生徒のロール番号、名前、マークなどのヘッダーが含まれます。生徒のデータは残りの行タグに含まれています。
- 行タグのスタイル設定用
テーブルタグ内 、ヘッド ブロック内に内部 CSS または埋め込み CSS を適用しました。ただし、行タグのクラスを作成する必要はありません。代わりに、単純に最初の子セレクター (p:first-child) を使用しています。これにより、テーブル タグ内の最初の行タグ要素が自動的に認識されます。最初の要素である行タグのスタイルを設定できます。テーブル内には複数行のタグがあります。ただし、見てわかるように、最初のタグがスタイル設定され、残りは無視されます。
結論
この記事では CSS の最初の子について学びました。この記事の first-child の結論は次のとおりです。
- CSS では、最初の子 (:first-child) セレクターを使用すると、最初の要素のスタイルを他の要素にすぐに適用できます。
- 最初の子は、親や兄弟のコンテンツとの関連性に基づいてマテリアルのスタイルを設定します。
- 位置ベースおよび構造ベースのクラスのメンバーである疑似クラスは、最初の子です。同じ型の他の兄弟 (要素) をチェックせずに、最初のクラスは親の最初の直接の子との一致を試みます。