カテゴリーごとにリンクの色を変えたい！属性セレクタを使ってCSSを設定しよう
2022-10-31
classを付与しなくても属性値によってcssでスタイルをつけられる！お知らせのカテゴリーの色分けに便利！
href属性、class属性、target属性、alt属性、src属性、type属性…
これらの属性の値（例えば target="_blank" の場合「_blank」が属性値。ダブルクォーテーションで囲まれている部分）ごとにCSSでスタイルを指定できます。
ここでは属性セレクタの種類や使い方についてまとめました！
例えばこんな時に便利！属性セレクタ
ページ内リンクにだけ設定したい！
例）
a[href^="#"] {padding: 20px;}
a[href^="#"] {padding: 20px;}
PCでは電話がかからない設定にしたい！
例）
a[href^="tel:"] {pointer-events: none;}
@media screen and ( max-width:767px ){
a[href^="tel:"] {pointer-events: auto;}
}
a[href^="tel:"] {pointer-events: none;}
@media screen and ( max-width:767px ){
a[href^="tel:"] {pointer-events: auto;}
}
aタグの背景色をカテゴリーやタグのリンク先ごとに設定したい！
例）
a[href*="/info"] {background: #F6AB00;}
a[href*="/info"] {background: #F6AB00;}
属性セレクタの種類
属性値と一致する場合 a[href="aaa"]
属性値がaaaの要素にスタイルが付きます。
例）
a[href="https://aaa/"] {text-decoration:under-line;}
リンク先が「https://aaa/」であるaタグにアンダーラインが付きます。
a[href="https://aaa/"] {text-decoration:under-line;}
リンク先が「https://aaa/」であるaタグにアンダーラインが付きます。
例）
a[target="_blank"]{color:#ccc;}
「target="_blank"」のaタグの文字色が#cccになります。
属性値の前方がaaaと一致する場合 a[href^="aaa"]
属性値の前の部分が同じ要素にスタイルが付きます。
例）
[class^="bnr-"] {padding: 20px;}
class名の前方に「bnr-」が付いている要素のpaddingが20px;になります。
[class^="bnr-"] {padding: 20px;}
class名の前方に「bnr-」が付いている要素のpaddingが20px;になります。
例）
a[href^="mailto:"] {color:#aaa;}
メールにリンクする要素の文字色が#aaaになります。
属性値にaaaを含む要素 a[href*="aaa"]
属性値にaaaを含む要素にスタイルが付きます。
例）
a[href*="/info"] {background: #F6AB00;}
リンク先が「info」を含むURLの場合に背景色が#F6AB00になります。
a[href*="/info"] {background: #F6AB00;}
リンク先が「info」を含むURLの場合に背景色が#F6AB00になります。
属性値の後の部分がaaaで終わる場合 a[href$="aaa"]
属性値にaaaを含む要素にスタイルが付きます。
例）
a[href$=".pdf"] {color: #fff;}
リンク先がpdfの場合、文字色が白になります。
a[href$=".pdf"] {color: #fff;}
リンク先がpdfの場合、文字色が白になります。
