【CSS】セレクターその３ 属性セレクター

2020年08月05日
こばゆた
こばゆた

3回に分けてお送りしてきたセレクター編最後の「その３」でございます。

「その１」、「その２」がまだの方はこちらです！

【CSS】セレクターその１ セレクターの基礎
...
kbyt-programming.com
2021年05月20日
【CSS】セレクターその２ 擬似セレクター
...
kbyt-programming.com
2021年05月20日
こばゆた
こばゆた

今回扱うのは「属性セレクター」とよばれるものでタグの中に書かれた属性や値に応じて指定ができるセレクターです

例えばid属性がついているものだけを指定したい場合などに使う事ができます

<ul>
  <li class="ex1">テキストテキスト</li>
  <li id="ex2">テキストテキスト</li>
  <li class="ex3">テキストテキスト</li>
  <li id="ex4">テキストテキスト</li>
  <li class="ex5">テキストテキスト</li>
</ul>
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id]
こばゆた
こばゆた

それほど難しいこともなく割と便利なので知っておくと良いでしょう

スポンサーリンク

1.属性セレクター

属性セレクターは[ ]内にある属性や値に応じて指定ができるセレクターです。

また属性セレクターは基本的に[ ](大かっこ)で囲います。

1-1.[属性名]

[ ]内に属性名を記入する事で指定できます。

[属性名]{
 プロパティ: 値;
}

id属性とclass属性がついているものをそれぞれ指定してみましょう。

<ul>
   <li id="first">テキストテキスト</li>
   <li id="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
[id]{
  color: red;
}
/*id属性がついているものの文字色を赤にする*/

[class]{
  color: blue;
}
/*class属性がついているものの文字色を青にする*/
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id]
[class]

ちゃんと選択されていますね。

もう一つ例を出してみます。

今度はリンクで出てくる”href属性”と画像を扱う時に出てくる”alt属性”を指定します。ちなみにimgタグの画像が出ないのは仕様ですので間違えではありません💦

<ul>
  <li><a href="#">テキストテキスト</a></li>
  <li><a href="#">テキストテキスト</a></li>
  <li><img src="#" alt="画像があると仮定してください"></li>
</ul>
[href]{
 color: red;
{
/*href属性がついているものの文字色を赤にする*/

[alt]{
 color: orange;
{
/*alt属性がついているものの文字色をオレンジにする*/
[href]
[alt]

こちらも属性名で指定することができています。

1-2.[属性名=” “]

ここからは属性名だけでなく、値も指定する場合です。

[属性名=” “]とする事で値と一致するものを絞り込む事ができます。

[属性名=" "]{
 プロパティ: 値;
}

id属性で値が”second”というものを指定します。

<ul>
   <li id="first">テキストテキスト</li>
   <li id="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
[id="second"]{
  color: red;
}
/*属性名がidで値が"second"のものの文字色を赤にする*/
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id=”second”]

絞り込めているのがわかります。

1-3.[属性名!=” “]

[属性名=” “]とは逆に指定したものと異なるものを指定します。

[属性名!=" "]{
 プロパティ: 値;
}

id=”second”以外のものを指定します。

<ul>
   <li id="first">テキストテキスト</li>
   <li id="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
[id!="second"]{
  color: red;
}
/*属性名がidで値が"second"以外のものの文字色を赤にする*/
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id!=”second”]

1-4.[属性名^=” “]

属性の値が特定の文字列で始まるものを指定します。

[属性名^=" "]{
 プロパティ: 値;
}
<ul>
   <li id="first">テキストテキスト</li>
   <li id="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
[id^="f"]{
  color: red;
} 
/*属性名がidで文字列が"f"から始まる値の文字色を赤にする*/

[class^="s"]{
  color: blue;
} 
/*属性名がclassで文字列が"s"から始まる値の文字色を青にする*/
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id^=”f”]
[class^=”s”]

id属性で値が”f”から始まっているのは”first”,”fourth”,”fifth”の3つなのでそれらが指定されています。

またclass属性の方は”s”から始まっているの”sixth”の1つだけですがそちらが指定されています。

1-5.[属性名$=” “]

属性の値が特定の文字列で終わるものを指定します。

[属性名$=" "]{
 プロパティ: 値;
}
<ul>
   <li id="first">テキストテキスト</li>
   <li id="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
[id$="d"]{
  color: red;
} 
/*属性名がidで文字列が"d"で終わる値の文字色を赤にする*/
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id$=”d”]

この例だとid属性の値が”d”で終わる”second”と”third”が指定されています。

1-6.[属性名*=” “]

属性の値が特定の文字列を含むものを指定します。

[属性名*=" "]{
 プロパティ: 値;
}
<ul>
   <li id="first">テキストテキスト</li>
   <li id="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
[id*="ir"]{
  color: red;
} 
/*属性名がidで"ir"の文字列を含まれる値の文字色を赤にする*/
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id*=”ir”]

この例だとid属性に”ir”の文字列が含まれている”first”と”third”が指定されています。

1-7.[属性名=” “][属性名=” “]

複数の属性セレクターを同時に指定しさらに範囲を狭めて指定することができます。またセレクター間にスペースは空けません。

[属性名=" "][属性名=" "]{
 プロパティ: 値;
}
<ul>
   <li id="first">テキストテキスト</li>
   <li id="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
[id*="ir"][id$="d"]{
  color: red;
} 
/*属性名がidで"ir"の文字列を含み、かつ"d"で終わる値の文字色を赤にする*/

[id^="f"][id$="h"]{
  color: blue;
} 
/*属性名がidで"f"から始まり、かつ"h"で終わる値の文字色を青にする*/
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id*=”ir”][id$=”d”]
[id^=”f”][id$=”h”]’)

id属性で”ir”を含みかつ、t”で終わる”first”が指定されます。

またもう一つはid属性で”f”から始まって”h”で終わる”fourth”と”fifth”が指定されています。

スポンサーリンク

2.まとめ

セレクターの指定その３まとめ
<ul>
   <li id="first">テキストテキスト</li>
   <li class="second">テキストテキスト</li>
   <li id="third">テキストテキスト</li>
   <li id="fourth">テキストテキスト</li>
   <li id="fifth">テキストテキスト</li>
   <li class="sixth">テキストテキスト</li>
</ul>
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
  • テキストテキスト
[id]
[class]
[id=”third”]
[id!=”third”]
[id^=”f”]
[class$=”d”]
[id*=”ir”]
記号意味
=属性と値が一致する要素を指定
!=属性と値が一致しない要素を指定
*=属性の値が指定したものから始まる要素を指定
$=属性の値が指定したもので終わる要素を指定
^=属性の値が指定したものを含む要素を指定

※複数指定する場合はスペースは空けない

こばゆた
こばゆた

3回に分けてお送りしてきたセレクター編でした

お疲れ様でした！

スポンサーリンク

コメント