CSSでいろいろな要素の指定をしてデザインを変えてみよう part1 [親要素の指定]

親要素を指定するメリット

親要素が指定できることによるメリットは次のようなものがあります。

・同じ子要素を持つ親要素を指定することができる
・親要素のクラス、idなどを追加できない場合に親要素を特定することができる　など。

親要素の指定の仕方

「has」を使用する

親要素に指定をするためには、:has()を使用することで行えます。
:has()はCSSの疑似クラスで、「()」の中に指定された要素が一つ以上の要素と同じであることを表します。

:has()の指定の仕方は次の通りです。

・[指定したい親要素]:has([子要素]){}

・上記で指定している[指定したい親要素]と[子要素]には、タグ、タグに指定しているクラス・id　などが指定でき、
状況に応じて使い分けることができます！

実際に使ってみよう

例1：特定の子クラスを持つ親要素の指定

目的：
特定の子クラスを持つ親要素の指定し、背景色を変えてみよう！
条件：
①指定する親要素：子クラス「child」を含む親要素のdiv
②指定する親要素のスタイル：背景色を青色にする
③親要素へのクラス・idなどの追加は行わない

対象のコード：

See the Pen has_question1 by 植村懸音 (@ufuykagy-the-encoder) on CodePen.

hasを使用して、親要素にスタイルを付けた結果は次の通りです。（CSSを選択して、hasの指定を見てみましょう！）

See the Pen has_question2 by 植村懸音 (@ufuykagy-the-encoder) on CodePen.

ここで指定したhasのパターンは次の通りでしたね！

・[親タグ]:has([子クラス]){}

例2：同じ子要素を持つ親要素を指定

目的：
同じ子要素を持つ親要素を指定して、背景色を変えてみよう！
条件：
①指定する親要素：子要素に「p」タグを含む親要素のdiv
②指定する親要素のスタイル：背景色を赤色にする
③親要素へのクラス・idなどの追加は行わない

対象のコード：

See the Pen has_question3 by 植村懸音 (@ufuykagy-the-encoder) on CodePen.

hasを使用して、親要素にスタイルを付けた結果は次の通りです。（CSSを選択して、hasの指定を見てみましょう！）

See the Pen Untitled by 植村懸音 (@ufuykagy-the-encoder) on CodePen.

ここで指定したhasのパターンは次の通りでしたね！

・[親タグ]:has([子タグ]){}

まとめ

・「has」を使用して親要素を指定する
・指定方法：[指定したい親要素]:has([子要素]){}
・親要素、子要素には「クラス、id、タグ」が指定できる