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

こんにちは、さちです。

サイト制作、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> 
<a href="example2.html">ほむら</a>

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

a[title="madoka"] （属性値：完全一致）

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

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

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

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

a[title^="mi"] （属性値：前方一致）

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

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

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

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

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

a[title$="mi"] （属性値：後方一致）

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

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

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

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

a[title*="mi"] （属性値：部分一致）

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

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

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

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

a[title~="madoka"] （属性値：部分一致）

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

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

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

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

※ 完全一致 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> 
<a href="example2.html" lang="la-VA">PUELLA MAGI</a> 
<a href="example3.html" lang="en-US">MAGICAL GIRL</a>

サンプル結果
魔法少女
 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> 
<a href="example2.html" title="kamijo-kyosuke">かみじょうきょうすけ</a> 
<a href="example3.html" title="miki-sayaka">みきさやか</a>

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

このような記述方法は 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％）はあまり多くないので、個人サイトなら無視しても大丈夫かなって……。

2024年9月
日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

「属性」って何？

属性セレクタの書き方

a[target] （属性：完全一致）

a[title="madoka"] （属性値：完全一致）

a[title^="mi"] （属性値：前方一致）

a[title$="mi"] （属性値：後方一致）

a[title*="mi"] （属性値：部分一致）

a[title~="madoka"] （属性値：部分一致）

a[lang|="ja"] （属性値 部分一致）

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

コメント

a[lang|="ja"] （属性値部分一致）