特定のID / Classを持つタグの親要素に対して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>
<style>
div:has(#test){
color: #f00;
}
</style>
<div>
親要素
<div id="test"></div>
</div>
<style> div:has(#test){ color: #f00; } </style> <div> 親要素 <div id="test"></div> </div>
参考サイト
関連記事
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
Bootstrapよりも簡単でClassを付与する必要のないCSSフレームワーク「Simple.css」の利用方法
何らかのテストページを提出する際、見た目を整えるためBootstrapを使用した ...
-
-
Material Design Liteでセレクトメニュー(プルダウン)の作成方法
Material Design Liteでformのセレクトメニュー(プルダウン ...
-
-
Material Design LiteでiPhoneのみリンク(ボタン)をクリックしても動作しない場合の対応方法
最近サイト内のツールページ等をMaterial Design Liteで作ってい ...
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...