痒いところに手が届くスタイル指定!
前回は、classセレクタやidセレクタなど、超基本的なセレクタを紹介しました。
この記事では続編として、属性セレクタをサンプルを交えて解説。CSS2レベルの基本から、CSS3で追加されたものまでを網羅しようと思います。
属性セレクタを知っておくと、かゆいところに手が届くようなスタイル指定が可能になりますよ。
ちなみに「セレクタって何ぞや?」という方は、こちらの投稿をご参照くださいませませ。
E[att] (属性名・完全一致)
属性セレクタの中で一番基本的な形。
あるE要素(pとかaとかdivとか…)のうち、指定したatt属性(nameやclass、titleなどなど)が付いている場合にスタイルが適用されます。
1 2 3 4 5 6 |
a[name] { color: red; } p[id][class] { color: blue; } |
1 2 3 4 |
<a name="青">テキストが赤色になる!</p> <p>何も変わらない。</p> <p id="foobar" class="hogehoge">ここは青色のテキスト!</p> <p class="hogehoge">変化しません。</p> |
E[att=”bar”] (単一属性値・完全一致)
ある要素のうち、指定した属性の値と完全一致した場合にのみスタイルが適用されます。
1 2 3 4 5 6 |
a[href="http://sample.com/"] { color: green; } p[class="hoge"] { color: yellow; } |
1 2 3 4 |
<a href="http://sample.com/">テキストが緑色になる!</a> <a href="http://sample.com/hogehoge/">完全一致じゃないので変化しない。</a> <p class="hoge">ここのテキストは黄色!</p> <p class="hoge foobar">ここは変化しない、完全一致ではないので。</p> |
E[att~=”bar”] (複数属性値・少なくとも一つが完全一致)
~(チルダ)を付けた属性セレクタ。
ある要素のうち、少なくとも一つの属性の値と完全一致した場合にスタイルが適用されます。
言葉だけでは分かりにくいですが、前述 E[att=”bar”]の使用例と比較していただくと腑に落とせるかもしれません。
1 2 3 |
p[class~="hoge"] { color: purple; } |
1 2 3 4 |
<p class="hoge">紫色になる!</p> <p class="foobar">変化しない。</p> <p class="hoge foobar">紫色になる!</p> <p class="hogehoge foobar">変化しない。</p> |
E[attr|=”bar”] (ハイフン区切り属性値・前方一致)
|(バーティカルバー)を付けた属性セレクタ。
ハイフンで区切られた値をもつ要素のうち、前の部分が一致する場合にスタイルが適用されます。
もともとは”en-US”のように、言語の種類を示す値を意図したセレクタですが、どんな属性値にでも使用です。
以下に例を示します。
1 2 3 |
p[class|="hoge"] { color: aqua; } |
1 2 3 4 |
<p class="hoge-foo">ここが水色になる!</p> <p class="hoge">ここも水色になる!</p> <p class="hogefoo">変化しない。</p> <p class="foo-hoge">変化しない。</p> |
E[att^=”bar”] (属性値・前方一致)
^(サーカムフレックス)を付けた属性セレクタ。
CSS3から追加されたものになります。
ある要素のうち、指定した属性の値と前方一致した場合に、スタイルが適用されます。
1 2 3 |
p[class^="hoge"] { color: lime; } |
1 2 3 4 5 |
<p class="hoge">テキストが黄緑色になる!</p> <p class="hogefor">ここも黄緑色になる!</p> <p class="hoge-for">ここも黄緑色!</p> <p class="forhoge">ここは変化しない。</p> <p class="ho ge">ここも変化しない。</p> |
E[att$=”bar”] (属性値・後方一致)
こちらの $(ドル)を付けた属性セレクタもCSS3からです。
ある要素のうち、指定した属性の値と後方一致した場合に、スタイルが適用されます。
1 2 3 |
p[class$="hoge"] { color: gray; } |
1 2 3 4 5 |
<p class="hoge">テキストが灰色になる!</p> <p class="forhoge">ここも灰色になる!</p> <p class="for-hoge">ここも灰色!</p> <p class="hogefor">ここは変化しない。</p> <p class="ho ge">ここも変化しない。</p> |
E[att*=”bar”] (属性値・部分一致)
こちらの *(アスタリスク)を付けた属性セレクタもCSS3から。
ある要素のうち、指定した属性の値と部分一致した場合に、スタイルが適用されます。
1 2 3 |
p[class$="hoge"] { color: red; } |
1 2 3 4 5 6 |
<p class="hoge">テキストが赤色になる!</p> <p class="forhoge">ここも赤色になる!</p> <p class="for-hoge">ここも赤色!</p> <p class="hogefor">ここも赤色!</p> <p class="forhogebar">ここも赤色!</p> <p class="ho ge">ここは変化しない。</p> |
以上、属性セレクタの一覧を紹介しました。
次回は、疑似要素と疑似クラスを解説したいと思っています。
ちなみに、超基本的なセレクタ達については、こちらの記事(【初心者対象】超基礎的なCSSセレクタの種類一覧)で紹介しています。
超多機能でSEOに強い!ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード!最新技術が詰め込まれたWPテーマTHE THOR