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

CSSでいろいろな要素の指定ができるようになりたいんだ。

なるほど。確かに指定する要素を特定することができれば便利だね！
じゃあ今回は、親要素の指定方法について解説しようかな♪

やったー！

じゃあ順番に見ていこう！

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

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

・同じ子要素を持つ親要素を指定することができる
・親要素のクラス、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、タグ」が指定できる