こんにちは、さち です。
サイト制作、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 条件で絞り込むことが可能です。
例えば、こんな記述。
この場合、属性 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%)はあまり多くないので、個人サイトなら無視しても大丈夫かなって……。
コメント
Stylusで特定URLの画像(src="xxx.jpg"みたいなの)を消せずにCSSの書き方情報を検索していました。
とてもわかりやすい解説で、おかげさまでやりたいことが達成できました。
本当に助かりました。ありがとうございました!