何らかのdata属性のあるタグにCSSを適用したい

何らかの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属性を持つ要素全体へ適用する方法、もしくは名前を""の内側のように前方一致で指定する方法はないのでしょうか?
ご教示頂ければ幸いです。

コメントを投稿

0 コメント