ちゃんと覚えてる?属性を使ったCSSの記述方法

この記事は約9分で読めます。
記事内に広告が含まれています

イメージ

こんにちは、さち です。

サイト制作、Stylish を使った CSS の改造など、CSS を使う機会は色々とあります。

しかし、属性を使った CSS の記述方法が中々覚えられない! 特に、前方一致,後方一致 あたりをすぐに忘れてしまう……。どの記号を、どう使うと、どうなるんだっけ?

今回は、属性を使った CSS の記述法についてまとめていきます。

スポンサーリンク

「属性」って何?

HTML でいう「属性」とは、タグに埋め込まれた付加情報のことを指します。

例えば、次のような <a> タグなら赤字部分が「属性」= の後の "(ダブルクォート) で囲まれた緑字部分が「属性値」です。

サンプル

「属性」は情報の種類を、「属性値」は情報の内容を表しています。属性値は半角スペースを挟むことで複数記述できます。

このような「属性」「属性値」を CSS に活用すれば、「id」「class」がないタグでもスタイルを指定できます。

属性による CSS セレクタの記述は角括弧の [ ] で囲みます。このようなセレクタを「属性セレクタ」と言います。(IE6 以前は属性セレクタ未対応)

サンプル

例えば、上記の CSS の記述なら、属性 target に属性値 _blank を持つ <a> タグは文字の色を赤くするという意味になります。

属性セレクタの書き方

<a> タグを使ったサンプルを見ていきます。CSS が適用された <a> タグは文字の色が赤くなります。

a[target] (属性:完全一致)

属性 target を持つ <a> タグにスタイルを適用します。

CSS
a[target] {color: red;}

HTML
<a href="example1.html" target="_blank">まどか</a><br>
<a href="example2.html">ほむら</a><br>

サンプル結果
まどか
ほむら

a[title="madoka"] (属性値:完全一致)

属性 title に属性値 madoka を持つ <a> タグにスタイルを適用します。

CSS
a[title="madoka"] {color: red;}

HTML
<a href="example1.html" title="madoka">まどか</a><br>
<a href="example2.html" title="kaname madoka">かなめ まどか</a><br>
<a href="example3.html" title="kaname-madoka">かなめ-まどか</a><br>

サンプル結果
まどか
かなめ まどか
かなめ-まどか

a[title^="mi"] (属性値:前方一致)

= の前に ^(サーカムフレックス) を付けると前方一致になります。

属性 title の属性値が mi で始まる <a> タグにスタイルを適用します。

CSS
a[title^="mi"] {color: red;}

HTML
<a href="example1.html" title="miki-sayaka">みき さやか</a><br>
<a href="example2.html" title="akemi-homura">あけみ ほむら</a><br>
<a href="example3.html" title="tomoe-mami">ともえ まみ</a><br>

サンプル結果
みき さやか
あけみ ほむら
ともえ まみ

a[title$="mi"] (属性値:後方一致)

= の前に $(ドル) を付けると後方一致になります。

属性 title の属性値が mi で終わる <a> タグにスタイルを適用します。

CSS
a[title$="mi"] {color: red;}

HTML
<a href="example1.html" title="miki-sayaka">みき さやか</a><br>
<a href="example2.html" title="akemi-homura">あけみ ほむら</a><br>
<a href="example3.html" title="tomoe-mami">ともえ まみ</a><br>

サンプル結果
みき さやか
あけみ ほむら
ともえ まみ

a[title*="mi"] (属性値:部分一致)

= の前に *(アスタリスク) を付けると部分一致になります。

属性 title の属性値に mi を含む <a> タグにスタイルを適用します。

CSS
a[title*="mi"] {color: red;}

HTML
<a href="example1.html" title="miki-sayaka">みき さやか</a><br>
<a href="example2.html" title="akemi-homura">あけみ ほむら</a><br>
<a href="example3.html" title="tomoe-mami">ともえ まみ</a><br>

サンプル結果
みき さやか
あけみ ほむら
ともえ まみ

a[title~="madoka"] (属性値:部分一致)

= の前に ~(チルダ) を付けると、属性値を「半角スペース」で区切って一致するものを探します。

属性 title に属性値 madoka を持つ <a> タグにスタイルを適用します。

CSS
a[title~="madoka"] {color: red;}

HTML
<a href="example1.html" title="madoka">まどか</a><br>
<a href="example2.html" title="kaname madoka">かなめ まどか</a><br>
<a href="example3.html" title="kaname-madoka">かなめ-まどか</a><br>

サンプル結果
まどか
かなめ まどか
かなめ-まどか

※ 完全一致 a[title="madoka"] だと1行目しか適用されない
※ 前方一致 a[title^="madoka"] だと1行目しか適用されない
※ 後方一致 a[title$="madoka"] だとすべて適用される
※ 部分一致 a[title*="madoka"] だとすべて適用される

a[lang|="ja"] (属性値 部分一致)

= の前に |(バーティカルバー) を付けると、属性値を -(ハイフン) で区切って一致するものを探します。

属性 lang に属性値 ja を持つ <a> タグにスタイルを適用します。

CSS
a[lang|="ja"] {color: red;}

HTML
<a href="example1.html" lang="ja-JP">魔法少女</a><br>
<a href="example2.html" lang="la-VA">PUELLA MAGI</a><br>
<a href="example3.html" lang="en-US">MAGICAL GIRL</a><br>

サンプル結果
魔法少女
PUELLA MAGI
MAGICAL GIRL

※ 文法に則るとラテン語表記は「PUELLA MAGA」らしい

属性セレクタは同時に複数使える

属性セレクタを複数記述することで、スタイル適用先を AND 条件で絞り込むことが可能です。

例えば、こんな記述。

a[title^="ka"][title$="ka"]

この場合、属性 title の属性値が ka始まり ka で終わる <a> タグにスタイルを適用します。

CSS
a[title^="ka"][title$="ka"] {color: red;}

HTML
<a href="example1.html" title="kaname-madoka">かなめ まどか</a><br>
<a href="example2.html" title="kamijo-kyosuke">かみじょう きょうすけ</a><br>
<a href="example3.html" title="miki-sayaka">みき さやか</a><br>

サンプル結果
かなめ まどか
かみじょう きょうすけ
みき さやか

 

このような記述方法は div.madoka などと同じで AND 条件になるのは当たり前ですが、属性での記述方法だとそのことを忘れてしまいがち。ぜひ、覚えておきましょう。

例では、属性セレクタを2つ使いましたが、何個続けて記述しても構いません。

下記のように属性セレクタとプロパティ content を併用すれば、リンク先の「ファイル形式」や「外部ページ」を表すアイコンを自動で配置することも簡単にできます。

/* 画像ファイルは末尾にアイコンを表示 */
a[href$=".jpg"]::after,
a[href$=".png"]::after,
a[href$=".gif"]::after,
a[href$=".webp"]::after {
  content: url("icon/image.png");
}

/* 外部サイトへのリンクはアイコンを表示 */
a[target="_blank"]::after {
  content: url("icon/external.png");
}

ちなみに、タグ名(要素名)は無記入でも構いません。その場合、指定した「属性」「属性値」を持つすべてのタグにスタイルが適用されます。( *[title="madoka"] と同じ)

慣れると便利な属性を使った CSS 記述法ですが、IE6 以前は対応していません。ただ、IE6 のシェア(約6%)はあまり多くないので、個人サイトなら無視しても大丈夫かなって……。

コメント

  1. げんまい より:

    Stylusで特定URLの画像(src="xxx.jpg"みたいなの)を消せずにCSSの書き方情報を検索していました。
    とてもわかりやすい解説で、おかげさまでやりたいことが達成できました。
    本当に助かりました。ありがとうございました!

タイトルとURLをコピーしました