読者です 読者をやめる 読者になる 読者になる

ログってなんぼ

日々のメモです

CSS4:ある要素を子要素に持つ親要素を指定する属性セレクタ

css

CSS3の現状、「imgを子要素に持つa」を表現する属性セレクタは存在しません・・・

外部サイトへのアンカーに外部サイトアイコンをつけているような場合、

a[href^="http"] {
background:url('/img/exlink.png') no-repeat right center;
padding-right:18px;
margin-right:5px;
}
a[href^="http://自分のドメイン(内部リンク)"],
a.nomark {
background:none !important;
padding-right:0px !important;
margin-right:0px !important;
}

という感じにしておいて

<a class="nomark" href="http://hogehoge"><img src="/img/hoge.png"></a>

のように、アイコンを出し無くないa要素にはclassを振るしかないのが現状。

CSS4で実装予定?なの?

CSS4の議論内容?は色々なところに色々な情報が出ていて、検索すると「?をつける」「!をつける」など色々な情報がヒットします。

:has()だよ情報

Selectors Level 4

The relational pseudo-class, :has(), is a functional pseudo-class taking a relative selector list as an argument. It represents an element if any of the relative selectors, when absolutized and evaluated with the element as the :scope elements, would match at least one element.

引用元:Selectors Level 4


こちらはw3cのデベロッパーズサイトですが、この情報が最新なんでしょうかね??よくわかりません。

:has()が使えるようになればどうなるか

a[href^="http"] {
background:url('/img/exlink.png') no-repeat right center;
padding-right:18px;
margin-right:5px;
}
a[href^="http://自分のドメイン(内部リンク)"],
a:has(> img) {
background:none !important;
padding-right:0px !important;
margin-right:0px !important;
}

こう書く事ができ、htmlソースには特別なクラスが必要なくなるってことかな。

最後に一言

特定の子要素を持つ親要素にスタイルを適用するには、DOMの先読みが必要になってくると思われるのでパフォーマンスなどの面で議論がまだまだ必要なのかな?とか勘ぐってみたり。CSS系の勉強会とかコミュニティにでも参加してみようかな。