カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう

2022-10-31

PR 当ページのリンクには広告が含まれています。

classを付与しなくても属性値によってcssでスタイルをつけられる!お知らせのカテゴリーの色分けに便利!

href属性、class属性、target属性、alt属性、src属性、type属性…
これらの属性の値(例えば target="_blank" の場合「_blank」が属性値。ダブルクォーテーションで囲まれている部分)ごとにCSSでスタイルを指定できます。
ここでは属性セレクタの種類や使い方についてまとめました!

例えばこんな時に便利!属性セレクタ

ページ内リンクにだけ設定したい!

例)
a[href^="#"] {padding: 20px;}

PCでは電話がかからない設定にしたい!

例)
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="aaa"]

属性値がaaaの要素にスタイルが付きます。

例)
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;になります。

例)

a[href^="mailto:"] {color:#aaa;}
メールにリンクする要素の文字色が#aaaになります。

属性値にaaaを含む要素 a[href*="aaa"]

属性値にaaaを含む要素にスタイルが付きます。

例)
a[href*="/info"] {background: #F6AB00;}
リンク先が「info」を含むURLの場合に背景色が#F6AB00になります。

属性値の後の部分がaaaで終わる場合 a[href$="aaa"]

属性値にaaaを含む要素にスタイルが付きます。

例)
a[href$=".pdf"] {color: #fff;}
リンク先がpdfの場合、文字色が白になります。
広告スポンサーリンク