data属性にcssを効かせるには属性セレクタを使用する
hrefやdata属性の値が「○○」の要素にCSSを指定したいときには属性セレクタを使います。
[box03 title=”属性セレクタとは”]
「href=””」や「data=””」などの値をCSSで指定する方法です。
【例】
- href=””の値が○○の要素は、太文字にする
- data=””の値が△△の要素は、font-sizeを20pxにする
[/box03]
属性セレクタの書き方
要素[属性名=”値”] {
//CSSの指定
}
【aタグのhrefが https://google.com/ の要素】
1 2 3 | a[href="https://google.com/"] { color: green; } |
[jin-yohaku50]
【data属性が blueText の要素】
1 2 3 | a[data="blueText"] { color: blue; } |
属性セレクタで正規表現を使う
属性値の先頭が○○の要素を指定したいとき
【hrefの先頭が # から始まる要素】
1 2 3 | a[href^="#"] { color: red; } |