親要素のスタイルシートを設定できる！擬似クラス:has()の使い方

便利なスタイルシート来た～！親要素のスタイルシートを設定できるなんて夢のようです！

そうそう！入れ子のタグが”アレ”の時だけ、親要素のスタイルシートちょっと変えたいのよねぇ…って時に便利な奴ｗ

もう、何言ってるんだかわかんないですよね。以下解説やります。

このページはマジで！英語が苦手なナナヨが、ホームページ作成に必要なHTMLとCSSの
基本と応用を快適に使う為、忘れないように作ったメモページです。
悪戦苦闘する過程の中で、得たヒントを少しでも、
共有または参考にしていただけると幸いです。

擬似クラス「:has() 」って何？

子の要素が指定されたクラスだった時、親の要素を書き換えることができる疑似クラス。

ななよ

わ～い！親要素を指定できるって、ほんとステキ★

手っ取り早く事例をのせるね

手っ取り早く、さっそく見本へ

まずは表示から、パターン①

【Div クラス”Card”の中で、イメージを横幅50％で表示しなさい。】

HTMLは下記の通りです。

<div class="card">
 <img src="https://nanayo74.com/～省略～3668003.jpg" style="width: 50%;">
</div>

パターン②

HTMLはこちら。

【Div クラス”Card”の中で、イメージをクラス”W-50”で表示しなさい。】※W-50＝横幅50％

<div class="card">
<img src="https://nanayo74.com/～省略～3668003.jpg" class="w-50">
</div>

実践

さて、では本番です！

パターン②の時だけに、外枠のデザインを変更しようと思います。

いつもだと、<div class=”card”>にスタイルシートをさらに足してデザインを上書きしていきますが

下記のスタイルシートを用いると、

 div.card:has(> img.w-50){
    border-color: #00008b!important;　/*　線の色を青色にしなさい！絶対！　*/
    border-width: 5px !important;　/*　線の太さを5PXにしなさい！絶対！　*/
　　　　　　　　　　　　　　　　　　　　　　　}

パターン①　(htmlは同じ)

パターン②　(htmlは同じ)

じゃじゃ～ん！どうですか？わかりますか？

かんたんに解説

↓ さっきのスタイルシートは

【imgタグのクラス名（w-50）を直接の子に持つdiv.cardに下記のスタイルを追記します ！】ってことを示しています。

 div.card:has(> img.w-50){
                border-color: #00008b!important;　/**/
                border-width: 5px !important;　/**/
　　　　　　　　　　　　　　　　　　　　　　　}

書き方として、他にもたくさん

子が〇〇の時

/** クラス名.text　で、子がa要素の時のスタイル **/
.text:has(>a)　｛・・・・・・・｝

HTMLコードでは
<***** class=”text”>
<a>指定内容が適応される部分</a>

〇〇じゃないとき

/* strongの直接の子孫がないp要素を選択 */
p:not(:has(> strong)) {・・・・・・・}

HTMLコードでは①の時だけ適応される
①<p><b>ダミーテキスト</b></p>

②<p><strong>ダミーテキスト</strong></p>

横並び（同レベル）の時

/* inputの直接の兄弟があるlabel要素を選択 */
label:has(+ input) { color: #d32535 !important; }

HTMLコードでは

<label>ダミーテキスト</label><input type=”button” class=”btn btn-dark” value=”前のページへ戻る”>

まだまだ、ありますが

今回の解説はここまで、これを使うと普段いじれないテンプレートの内部もいじれちゃうかも！？

その際は、自己責任でお願いします。。

では、今回はこの辺で、
これからもどんどん更新していきます！
少しでもお役に立ったら、メモ代わりにどこかでシェアしてくれると嬉しいです。
それでは、次回もよろしくお願いします！