ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。
使いこなせてないCSSセレクタ第4弾「属性セレクタ」の覚書。
属性セレクタの概要
属性セレクタは、HTMLなどの属性と一致した場合に適用されえるセレクタ。
らしです。で、属性って何となりますが、下記にaタグでの例を挙げますがhrefやtitle、target、そしてclassやidも属性になるようです。
上記で言うとaが要素名、titleが属性名で、タイトルが属性値になる感じです。他の属性も同様。
E[foo]の場合は
要素[属性]{
プロパティ: 値;
}
属性セレクタの使用例
E[foo]
まずは属性セレクタの基本となるE[foo]（要素名[属性名]）の使用例をhtmlとcssと共に紹介。
html
<p title="適用される">title属性があるので適用される</p>
<p>title属性がないので適用されない</p>
css
p[title] {
color:red;
}
実際の表示
E[foo=”bar”]
続いてE[foo=”bar”]（要素名[属性名=”属性値”]）の使用例をhtmlとcssと共に紹介。
こちらは属性値まで指定し、属性値が完全一致の際に適用されます。
html
<p class="red">属性値が完全一致しているので適用される</p>
<p class="redred">属性値が完全一致してないので適用されない</p>
<p class="blue">属性値が完全一致してないので適用されない</p>
css
p[class="red"] {
color:red;
}
実際の表示
E[foo~=”bar”]
E[foo~=”bar”]（要素名[属性名~=”属性値”]）の使用例をhtmlとcssと共に紹介。
こちらは指定した属性の属性値が一つでも完全一致した際に適用されます。属性値が複数指定されていた時にその中で属性値が一致されれば良いということ。classで複数した時の一つが一致した時など。
「~」の記号はチルダ。(tilde)
html
<p class="red blue">完全一致している属性値があるので適用される。</p>
<p class="blue red">完全一致している属性値があるので適用される。</p>
<p class="blue green">完全一致している属性値がないので適用されない。</p>
css
p[class~="red"] {
color:red;
}
実際の表示
こちらでは外部リンクを単純に赤色にしましたが、他のサイトの紹介などでは外部リンクだった場合はアイコンを付けるなどのサンプルを多く見ました。
E[foo^=”bar”]
E[foo^=”bar”]（要素名[属性名^=”属性値”]）の使用例をhtmlとcssと共に紹介。
こちらは指定した属性の属性値が前方一致した際に適用されます。属性値の始まりが一緒のもの。
「^」の記号はキャレットとかカレットと読むようです。(caret)
html
<a href="http://wwww.yahoo.co.jp">属性値と前方一致しているので適用される。</a>
<a href="http://wwww.yahoo.co.jp">属性値と前方一致しているので適用される。</a>
<a href="/about.html">属性値と前方一致していないので適用されない。</a>
css
a[href^="http"] {
color:red;
}
実際の表示
こちらでは外部リンクを単純に赤色にしましたが、他のサイトの紹介などでは外部リンクだった場合はアイコンを付けるなどのサンプルを多く見ました。
E[foo$=”bar”]
E[foo$=”bar”]（要素名[属性名$=”属性値”]）の使用例をhtmlとcssと共に紹介。
こちらは指定した属性の属性値が後方一致した際に適用されます。属性値の終わりが一緒のもの。
html
<a href="aaa.pdf">属性値が後方一致しているので適用される。</a><br>
<a href="about.html">属性値が後方一致していないので適用されない。</a>
css
a[href$=".pdf"] {
color:red;
}
実際の表示
こちらでは単純に赤色にしましたが、リンク先がpdfの場合はアイコンを付けるなどの時に使えそうですね。
E[foo*=”bar”]
E[foo*=”bar”]（要素名[属性名*=”属性値”]）の使用例をhtmlとcssと共に紹介。
こちらは指定した属性の属性値が部分一致している際に適用されます。指定した属性値が含まれるものなので完全一致していなくて良い。
「*」の記号はアスタリスク。(asterisk)
html
<p class="bluered">一致している属性値があるので適用される。</p>
<p class="blue red yellow">一致している属性値があるので適用される。</p>
<p class="blue green">一致している属性値がないので適用されない。</p>
css
p[href*="red"] {
color:red;
}
実際の表示
CSS HAPPYLIFE ZEROさんでは、特定のディレクトリの画像にボーダーをつける例を紹介していますが、使いどころが難しそうですね。同じ名称を含むcssとかにも使えそうですが、今の所これというのが思いつきません。
E[foo|=”bar”]
E[foo|=”bar”]（要素名[属性名|=”属性値”]）の使用例をhtmlとcssと共に紹介。
こちらは指定した属性の属性値が一致するか「属性値-（ハイフン）」で始まる値が一致している際に適用されます。
「|」の記号はバーティカルバーとかバーティカルラインとかパイプラインと読まれるようです。英語でvertical bar、vertical lineとかあるので縦棒、縦線の意味なのでそんな感じかと。
html
<a hreflang="en" href="http://www.yahoo.com">属性値が一致しているので適用される。</a><br>
<a hreflang="en-us" href="http://www.yahoo.com">属性値の始まり（-の前まで）が一致しているので適用される。</a><br>
<a hreflang="ja" href="/about.html">属性値が一致していないので適用されない。</a>
css
a[href|="en"] {
color:red;
}
実際の表示
他言語サイトなどで利用出来るかもしれませんがなかなか使わない気が個人的にはします。classのハイフン区切りで始まりが同じものになら使いどころがあるかもしれないですね。（例：btn-〇〇〇みたいのが複数ある時など）
個人的メモ
一応、IEはIE7以降対応のセレクタ。
参照ページ
記事にする際に参考にさせていただいたページ。
これまでのと違い、複数ページで紹介されているものは一部ページのリンクになります。
