勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

特定のID / Classを持つタグの親要素に対してCSSを割り当てる方法

  CSS

特定のID / Classを持つタグの親要素に対してCSSを割り当てたい。また、その案件ではASPを用いたサイトのため親要素に対してインラインで直接CSSを書いたり、ID / Classを付与することはできないという制限があった。以下に対応方法のメモ。

 

リファレンス

https://developer.mozilla.org/ja/docs/Web/CSS/:has

 

ソースコード

<style>
div:has(#test){
    color: #f00;
}
</style>
<div>
    親要素
    <div id="test"></div>
</div>

 

参考サイト

https://techkoya.com/css-has/#index_id1

 - CSS

  関連記事

CSSで一つの要素に対して複数の背景色を指定する方法
CSSで一つの要素に対して複数の背景色を指定する方法

1つのdiv要素に対して複数の背景色をつけたかった。background-col ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート
管理画面やダッシュボードとして便利そうなBootstrap系のテンプレート

新規サイトの立ち上げでダッシュボード、管理画面を作る必要があった。小規模なサイト ...

スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法
スクロールしても追尾する要素をプラグイン等は利用せずCSSのみで作成する方法

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法

セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...