何らかのdata属性がある場合、名前を問わずCSSを適用したいと考えています。

該当のソースコード

CSS
1*[data-bold] {
2    font-weight: bold;
3}
4*[data-italic] {
5    font-style: italic;
6}
7*[data] {
8    text-decoration: underline;
9}

HTML
1<span data-bold>one</span>
2<span data-italic>two</span>
3<span data>three</span>

想定する挙動

oneは太字、twoは斜体、全てに下線

現状

下線がthreeにしか適用されない

data属性を持つ要素全体へ適用する方法、もしくは名前を""の内側のように前方一致で指定する方法はないのでしょうか？
ご教示頂ければ幸いです。

m.ts10806

2023/07/19 06:11

classではダメな理由は何でしょうか。もう少し前提や背景を詳しく書かれたほうが良いと思います

minagiduki

2023/07/19 06:52

実際はaタグでhrefもdataも「ない」場合に適用したいのですが、そこはnot()で反転させれば良いと思った為このような質問になりました。とはいえ指定できないという回答を頂いたので諦めようと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

一般的なCSSのセレクタで指定する方法はないと思います。

参考

jsをつかっていいならこう

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelectorAll('*').forEach(x=>{
3    [...x.attributes].forEach(y=>{
4      if(/^data/.test(y.name) && !x.hasAttribute('data')){
5        x.setAttribute("data","");
6      }
7    });
8  });
9});