【CSS擬似クラス】要素の順番や種類を指定する方法

４つ目の要素だけ装飾したい、並んでいる要素の偶数目だけデザインを変えたい、という場合にCSSの擬似クラスを利用して順番や種類を指定する方法があります。

上手く使えば後からクラスをつけ足す必要もなくなり作業が少し楽になるかも？

CSS擬似クラスとは？

CSSにて、要素に様々な機能を追加するものと捉えるとわかりやすいと思います。

例えば下記のように<a>に擬似クラス:hoverを加えると、<a>要素にhover（マウスを置く）した時だけ文字色を変えるなどの指示ができるようになります。

a:hover {
 color:red;
}

早速順番や種類を指定する擬似クラスを見ていきましょう。

わかりやすいように、擬似クラスを追加する要素は全てAで統一して説明します。

/* 親要素内で2番目の要素 */
A:nth-child(2) {
  color: red;
}

要素:nth-child(n)でその要素が所属している親要素内のn番目を指定

/* 親要素内で同じ要素（A）の2番目 */
A:nth-of-type(2) {
  color: red;
}

要素:nth-of-type(n)で親要素内の指定したものと同じ要素（A）のn番目を指定

/* 親要素（B）内でA以外の要素 */
B:not(A) {
  color: red;
}

親要素:not(特定の子要素)でカッコ内の要素以外を指定

/* 親要素内の最初の要素 */
A:first-child {
  color: red;
}

/* 親要素内の最後の要素 */
A:last-child {
  color: red;
}

要素:first-childで最初の要素、要素:last-childで最後の要素を指定

/* 同じ要素（A）の中で最初の要素 */
A:first-of-type {
  color: red;
}

/* 同じ要素（A）の中で最後の要素 */
A:last-of-type {
  color: red;
}

要素:first-of-typeで指定した要素と同じ要素の最初、要素:last-of-typeで同じ要素の最後を指定

/* 親要素内で奇数の要素 */
A:nth-child(odd) {
  color: red;
}

/* 親要素内で偶数の要素 */
A:nth-child(even) {
  color: red;
}

要素:nth-child(odd)で奇数番目の要素、要素:nth-child(even)で偶数番目の要素を指定

/* 同じ要素（A）の中で奇数の要素 */
A:nth-of-type(odd) {
  color: red;
}

/* 同じ要素（A）の中で偶数の要素 */
A:nth-of-type(even) {
  color: red;
}

要素:nth-of-type(odd)で指定した要素と同じ要素の偶数番目、要素:nth-of-type(even)で指定した要素と同じ要素の奇数番目を指定

/* 5の倍数番目の要素 */
A:nth-child(5n) {
  color: red;
}

要素:nth-child(Xn)でカッコ内で指定したXの倍数番目を指定

/*  同じ要素（A）の5の倍数番目の要素 */
A:nth-of-type(5n) {
  color: red;
}

要素:nth-of-type(Xn)で指定した要素と同じ要素のXの倍数番目を指定

/* 5番目までの要素 */
A:nth-child(-n+5) {
  color: red;
}

/* 5番目以降の要素 */
A:nth-child(n+5) {
  color: red;
}

要素:nth-child(-n+X)でX番目までの要素、要素:nth-child(n+X)でX番目以降の要素を指定

/* 同じ要素（A）の5番目までの要素 */
A:nth-of-type(-n+5) {
  color: red;
}

/* 同じ要素（A）の5番目以降の要素 */
A:nth-of-type(n+5) {
  color: red;
}

要素:nth-of-type(-n+X)で指定した要素と同じ要素のX番目までの要素、要素:nth-of-type(n+X)で指定した要素と同じ要素のX番目以降の要素を指定

以上、CSS擬似クラスで特定の要素を指定する方法でした。

この指定方法を使いこなせるようになると、HTMLを動かせない場合（HTMLにてクラスを追加できないなど）にも擬似クラスで指定して編集することができるようになりますよ。