」要素の場合、子を保持することで親要素のスタイルを調整できます。この目的のために、「 ：もっている（） 」セレクター。

両方の「

」要素から、「

」要素を含むものを「 .class-name:has(子の名前) 」：

.parent-div : もっている ( h1 ) {

背景色 : #103e6d ;

色 : 貝殻 ;

幅 : 150px ;

身長 : 150px ;

境界半径 : 50% ;

テキスト整列 : 中心 ;

}

ここでは、親要素に次の CSS プロパティを適用しました。

---

---

• 「 背景色 」は、要素の背景色を指定するために使用されます。
• 「 色 」は、要素のテキストの色を指定します。
• 「 幅 」は、要素の幅を定義するために使用されます。
• 「 身長 」は要素の高さを指定します。
• 「 境界半径 ” プロパティを使用して、要素の角を丸く設定します。
• 「 テキスト揃え 」は、テキストの配置を指定します。

出力

すべての子要素を選択するには?

親セレクターを使用して子要素を選択するには、次の例を参照してください。

例

HTML ページを作成するには、次の手順を実装します。

• 2 つの「」を含む div 要素を追加します。

  「タグと」

  ” クラスを持つタグ “ 子部門 」。
• 子供 ' 分周 」要素には「

  」要素が含まれています。

< 分周 クラス = 「親部門」 >

< p > こんにちは < / p >

< p > 世界 < / p >

< 分周 クラス = 「子部門」 >

< p > 私は子部門です < / p >

< / 分周 >

< / 分周 >

親を通じて子要素を選択できます “

' クラス。これは、その直接の「」を選択するだけではありません p 」要素だけでなく、ネストされた「」も選択します p 要素:

.parent-div p {

背景色 : #7F167F ;

フォントファミリー : 筆記体 ;

フォントサイズ : 25px ;

テキスト整列 : 中心 ;

色 : 白い煙 ;

}

出力

すべての直接の子要素を選択する方法は?

親divの直接の子を選択するには、「 > 」の記号です。これは、親の直接の子であるすべての「p」要素を選択するのに役立ちます」

」。たとえば、次の CSS プロパティを適用しました。

.parent-div > p {

背景色 : #7F167F ;

フォントファミリー : 筆記体 ;

フォントサイズ : 30px ;

テキスト整列 : 中心 ;

色 : 白い煙 ;

}

「 フォントファミリー 」は、選択した要素のフォントを指定し、「 フォントサイズ 」は、フォントのサイズを定義するために使用されます。

出力

HTML と CSS の CSS 親セレクターについて説明しました。

結論

CSS では、「 ：もっている（） 」セレクターは、親セレクター疑似クラスとして利用されます。特に親要素を選択するために使用されます。例えば、 ' .parent-div:has(h1) 」は、「

要素。親要素の子要素を選択するには、「 .parent-div p 」。条件ステートメントを使用して、直接の子要素をすべて選択することもできます。この記事では、CSS 親セレクターについて例を挙げて説明しました。