概要
疑似クラス(phseudo classes)は指定したセレクターの要素に対して、各疑似クラスの条件に合致した場合のみスタイルを適用する。
書式
[セレクター]:[疑似クラス名] { ...}
セレクターはタグの要素名やクラス名の組み合わせ。
コロンは1つ。
主な疑似クラス
:hover
指定したセレクター上にマウスカーソルが乗っている間だけスタイルを適用する。
HTML
|
1 2 3 |
<p> <span class="inversion">この文の上にマウスカーソルを置いてみてください</span> </p> |
CSS
|
1 2 3 4 |
.inversion { background-color: #fff; color: #00f; } |
:first-child/:last-child
複数の同じ親に属する要素群のうち最初の要素のみスタイルを適用する。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div class="indent"> <p> first-child疑似要素によって、ある親要素の下の要素群の最初の要素にのみ 特定のスタイルを適用できます。 </p> <p> たとえばこのケースではdiv要素の下に2つのp要素がありますが、 最初のp要素の文章のみが1字下げられています。 </p> </div> |
CSS
|
1 2 3 |
.indent p:first-child { text-indent: 1em; } |
:nth-child()
nth-childは引数をとり、同じ親に属する要素群のうち引数の条件に合致するものにスタイルを適用する。
nth-child(i)
i番目の要素にスタイルを適用する。iの開始値は1。
以下の例では2番目のアイテムのみ赤色になる。
HTML
|
1 2 3 4 5 6 7 8 |
<ul class="even"> <li>1番目のアイテム</li> <li>2番目のアイテム</li> <li>3番目のアイテム</li> <li>4番目のアイテム</li> <li>5番目のアイテム</li> <li>6番目のアイテム</li> </ul> |
CSS
|
1 2 3 |
ul.nth li:nth-child(2) { color: #f00; } |
even/odd
引数にeven/oddを指定すると、要素群のうち偶数番目／基数番目の要素にスタイルが適用される。
以下の例では、2番目、4番目、6番目のアイテムが青くなる。
HTML
|
1 2 3 4 5 6 7 8 |
<ul class="even"> <li>1番目のアイテム</li> <li>2番目のアイテム</li> <li>3番目のアイテム</li> <li>4番目のアイテム</li> <li>5番目のアイテム</li> <li>6番目のアイテム</li> </ul> |
CSS
|
1 2 3 |
ul.even li:nth-child(even) { color: #00f; } |
関数形(xn+y)
以下の例では、3n+1の指定に対して、3×0+2=2、3×1 +2=5、3×2+1=7番目の要素に下線が引かれる。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="func"> <li>1番目のアイテム</li> <li>2番目のアイテム</li> <li>3番目のアイテム</li> <li>4番目のアイテム</li> <li>5番目のアイテム</li> <li>6番目のアイテム</li> <li>7番目のアイテム</li> <li>8番目のアイテム</li> <li>9番目のアイテム</li> </ul> |
CSS
|
1 2 3 |
ul.func li:nth-child(3n+2) { text-decoration: underline; } |