Sample List

CSS3で追加されたセレクタを活用してみる

属性セレクタ

aタグのhref属性を例にサンプルをまとめてみます。

a[href^="foo"] href属性がfooで始まるaタグ
a[href$="foo"] href属性がfooで終わるaタグ
a[href*="foo"] href属性がfooを含むaタグ

例えば、以下のようなHTMLがあったとします。

<ul>
  <li><a href="http://google.co.jp" target="_blank">Google</a></li>
  <li><a href="https://yahoo.com" target="_blank">Yahoo</a></li>
  <li><a href="https://goo.ne.jp" target="_blank">goo</a></li>
</ul>

続いて、CSSはこのようにします。

a[href^="http://"] { // hrefがhttp://で始まる
  color: red;
}
a[href$=".com"] { // hrefが.comで終わる
  color: blue;
}
a[href*="goo"] { // hrefがgooを含む
  font-size: 20px;
}

すると、以下のようになります。

hrefがhttp://で始まる一つ目のaタグは赤く、.comで終わるaタグは青く、gooを含むaタグはフォントサイズが大きくなっている事が確認できると思います。

nth-child等のセレクタ

「◯番目の要素」「最後の要素」「偶数番目にある要素」「奇数番目にある要素」といった選択をする場合に使います。

:last-child 最後の要素を選択
:nth-child(n) カッコ内に数字等の指定でn番目の要素を選択
:nth-last-child(n) カッコ内に数字等の指定で後ろから数えてn番目の要素を選択
:only-child ある要素内で子要素が唯一の要素を選択

last-child

last-childを使い、以下のリストの最後の要素にCSSを適用してみます。

<ul>
  <li>Acid Black Cherry</li>
  <li>Janne Da Arc</li>
  <li>L'Arc~en~Ciel</li>
  <li>GLAY</li>
</ul>

CSSはこのようにします。

ul li:last-child {
  font-weight: bold;
}

以下のように、最後のliが太字になりましたね。

  • Acid Black Cherry
  • Janne Da Arc
  • L'Arc~en~Ciel
  • GLAY

nth-child(n)

まずは単純に2個目のliを赤色にしてみます。

<ul>
  <li>Acid Black Cherry</li>
  <li>Janne Da Arc</li>
  <li>L'Arc~en~Ciel</li>
</ul>

CSSはこのようにします。

ul li:nth-child(2) {
  color: red;
}

以下のように、2個目のliが赤色になりましたね。

  • Acid Black Cherry
  • Janne Da Arc
  • L'Arc~en~Ciel

お次はよく使うであろう、偶数番目と奇数番目の要素を選択してみたいと思います。
HTMLは次のように。

<ul>
  <li>Acid Black Cherry</li>
  <li>Janne Da Arc</li>
  <li>L'Arc~en~Ciel</li>
  <li>GLAY</li>
</ul>

CSSは次のようにします。

ul.nth-child-03 li:nth-child(odd) { // 奇数番目を選択(2n+1でも同じ)
  background: red;
}
ul.nth-child-03 li:nth-child(even) { // 偶数番目を選択(2nでも同じ)
  background: blue;
}

以下のように、奇数番目のliは背景色赤、偶数番目のliは背景色青になりました。

  • Acid Black Cherry
  • Janne Da Arc
  • L'Arc~en~Ciel
  • GLAY

6個目以降の要素や、5個目以前の要素選択したりもできます。

<ul>
  <li>Acid Black Cherry</li>
  <li>Janne Da Arc</li>
  <li>L'Arc~en~Ciel</li>
  <li>VAMPS</li>
  <li>GLAY</li>
  <li>BREAKERZ</li>
  <li>ゴールデンボンバー</li>
  <li>LUNA SEA</li>
  <li>X JAPAN</li>
  <li>B'z</li>
</ul>

CSSは以下のように。

ul li:nth-child(n+6) { // 6個目以降の色を赤に
  color: red;
}
ul li:nth-child(-n+5) { // 5個目以前の色を赤に
  color: blue;
}

すると以下のように、6個目以降は赤色、5個目以前は青色になります。

  • Acid Black Cherry
  • Janne Da Arc
  • L'Arc~en~Ciel
  • VAMPS
  • GLAY
  • BREAKERZ
  • ゴールデンボンバー
  • LUNA SEA
  • X JAPAN
  • B'z

nth-last-child(n)

後ろから数えてn番目とのことなので、nth-childの逆になりますね。
以下のリストの4番目(後ろから2番目)にCSSを適用してみます。

<ul>
  <li>Acid Black Cherry</li>
  <li>Janne Da Arc</li>
  <li>L'Arc~en~Ciel</li>
  <li>VAMPS</li>
  <li>GLAY</li>
</ul>

CSSは以下のように。

ul li:nth-last-child(2) {
  color: red;
}

はい、ご想像どおりで、後ろから2番目のliが赤色になっていますね。

  • Acid Black Cherry
  • Janne Da Arc
  • L'Arc~en~Ciel
  • VAMPS
  • GLAY

only-child

例えば、以下のようなリスト構成だったとします。

<ul>
  <li>Acid Black Cherry</li>
  <li>Janne Da Arc</li>
  <li>L'Arc~en~Ciel</li>
</ul>
<ul>
  <li>VAMPS</li>
</ul>
<ul>
  <li>LUNA SEA</li>
  <li>X JAPAN</li>
</ul>

そして、CSSは以下のようにします。

ul li:only-child { // 「VAMPS」が赤色になる
  color: red;
}

ulが3つあり、その中で子要素(li)が唯一であるのは「VAMPS」が含まれているリストになります。
よって「VAMPS」のliが赤色になりますね。

  • Acid Black Cherry
  • Janne Da Arc
  • L'Arc~en~Ciel
  • VAMPS
  • LUNA SEA
  • X JAPAN
一覧に戻る