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

css

2022-10-31

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の場合、文字色が白になります。

-css

関連記事

「ダークモード」対応の注意点と手順を知りたい!

Webサイトの「ダークモード」対応にチャレンジ! 「ダークモード」とは? パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …

疑似要素を使ってアイコンをつけたい!アイコン画像を左右反転させたい!

疑似要素「:before」で要素の先頭に子要素のアイコンをつける 「:before」だと要素の先頭に子要素、「:after」だと要素の最後に子要素がつけられます。 テキストの前にアイコンをつける co …

cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

CSSで作るレスポンシブ対応のスプライトアニメーション やりたいこと ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わ …

メインビジュアルをブラウザ画面ぴったりになるように調整したい!

パソコン、スマホ、タブレットでも メインビジュアルが画面いっぱいになるように設定 パソコンだと存在感あるファーストビューでも、スマホだと横幅に合わせて小さくなってしまうことがありますよね。 画像の左右 …

CSS Transitionで手軽にアニメーションを取り入れたい

CSSのアニメーション、Transitionに変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね!