• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

CSSセレクタまとめ 属性セレクタ編

投稿者アイコン

2018/08/08

書いた人:
rurippa!
カテゴリ:
CSS
653 views

属性セレクタを使えば、外部リンクにだけアイコンを追加したり、より限定した範囲を指定できるようになります!

CSSセレクタまとめ 属性セレクタ編


今回は「属性セレクタ」についてお話します。

外部リンクのものだけデザイン変更したい!とか、より細かい指定ができるようになります。

属性ってなに?

classと書いている部分が属性になります。
他にも、id、title、style、href、lang、dir、accesskey・・・なども同じように属性です。

selector_img02

属性セレクタのまとめ

では、例と合わせて紹介していきます。

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

まとめ

属性セレクタを使えば、まとめて指定できるようになってすごい便利ですので、
ぜひお役立てください♪

参考サイト

「Selectors Level 3 (W3C Recommendation 29 September 2011)」の日本語訳
HTMLクイックリファレンス 属性セレクタ-スタイルシートリファレンス


この記事を読んだ人はこんな記事も読んでいます

<

>