勉強したことのメモ

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で親子関連のセレクターをネスト(入れ子)で指定する方法

CSSで親子関連のセレクターを指定する場合「.parent .child{}」の ...

jQuery無しで要素にアニメーション効果を設定する方法(animate.css)
jQuery無しで要素にアニメーション効果を設定する方法(animate.css)

あるサイトをWappalyzerで調査していた際に「animate.css」とい ...

画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法
画像ホバー時にエフェクトを追加したり文字を重ねられる「Izmir」ライブラリの利用方法

Lightboxを使用しているページで画像をクリックすると拡大表示されることをユ ...

jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について
jQueryの日付&時間のピッカー(bootstrap-datetimepicker)について

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、普通のセレクトメ ...

CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法
CSSでカラーコード等を変数(カスタムプロパティ)として使用する方法

他社が作成されたCSSのソースコードを拝見していると、背景等の色を指定する部分に ...