CSSセレクタまとめ 属性セレクタ編
：属性セレクタを使えば、外部リンクにだけアイコンを追加したり、より限定した範囲を指定できるようになります！
今回は「属性セレクタ」についてお話します。
外部リンクのものだけデザイン変更したい！とか、より細かい指定ができるようになります。
属性ってなに？
classと書いている部分が属性になります。
他にも、id、title、style、href、lang、dir、accesskey・・・なども同じように属性です。
属性セレクタのまとめ
では、例と合わせて紹介していきます。
E[foo] “foo”属性を持つE要素
例：aタグがtitle属性を持っているとき、文字の色を変える
<p><a href="#" title="taneppa">title属性あり</a></p>
<p><a href="#">title属性なし</a></p>
<style>
a[title] {
color: #8b6a4e;
font-weight: bold;
}
</style>
E[foo="bar"] “foo”属性の値が”bar”であるE要素
例：外部リンク（target=”_blank”）がついてるとき、文字の色を変える
<p><a href="#" target="_blank">target="_blank"あり</a></p>
<p><a href="#">なし</a></p>
<style>
a[target="_blank"] {
color: #8b6a4e;
font-weight: bold;
}
</style>
E[foo~=”bar”] “foo”属性が空白区切りの値をとり、その値の1つが”bar”であるE要素
例：pタグがtaneというクラスを持っているとき、文字の色を変える
<p class="txt tane">クラス名：txt tane</p>
<p class="txt Tane">クラス名：txt Tane</p>
<p class="txt taneppa">クラス名：txt taneppa</p>
<style>
p[class~="tane"] {
color: #8b6a4e;
font-weight: bold;
}
</style>
クラス名：txt tane
クラス名：txt Tane
クラス名：txt taneppa
E[foo^=”bar”] “foo”属性の値が”bar”から始まるE要素
例：pタグに、taneで始まるクラス名があるとき、文字の色を変える
<p class="tane_txt">クラス名：tane_txt</p>
<p class="taneppa">クラス名：taneppa</p>
<p class="Tane">クラス名：Tane</p>
<style>
p[class^="tane"]{
color: #8b6a4e;
font-weight: bold;
}
</style>
クラス名：tane_txt
クラス名：taneppa
クラス名：Tane
E[foo$=”bar”] “foo”属性の値が”bar”で終わるE要素
例： pタグに、taneで終わるクラス名があるとき、文字の色を変える
<p class="txt_tane">クラス名：txt_tane</p>
<p class="tane">クラス名：tane</p>
<p class="Tane">クラス名：Tane</p>
<style>
p[class$="tane"]{
color: #8b6a4e;
font-weight: bold;
}
</style>
クラス名：txt_tane
クラス名：tane
クラス名：Tane
E[foo|="en"] “foo”属性の値がハイフン区切りの値をとり、その値が”en”から始まるE要素
例： pタグに、taneというクラスがあるとき、文字の色を変える
<p class="txt_tane">クラス名：txt_tane</p>
<p class="tane">クラス名：tane</p>
<p class="Tane">クラス名：Tane</p>
<style>
p[class|="tane"]{
color: #8b6a4e;
font-weight: bold;
}
</style>
クラス名：txt_tane
クラス名：tane
クラス名：Tane
E[foo*="bar"] foo属性の値にbarを含むE要素
例： aタグに、taneという文字を含むクラスがあるとき、文字の色を変える
<p class="txt_tane">クラス名：txt_tane</p>
<p class="tane">クラス名：tane</p>
<p class="Tane">クラス名：Tane</p>
<style>
a[class*="tane"]{
color: #8b6a4e;
font-weight: bold;
}
</style>
クラス名：txt_tane
クラス名：tane
クラス名：Tane
まとめ
いかがでしたか？
属性セレクタを使えば、まとめて指定できるようになり 便利なので、ぜひお役立てください♪
参考サイト