【CSS】何番目を指定する擬似クラスを使いこなそう！

みなさん、こんにちは。

今回は何番目を指定する擬似クラスに焦点を絞ってご紹介いたします。
擬似クラスを使いこなせるようになるとコーディングが早くなったり、システム化しやすくなったり、htmlを変更せずにスタイルを当てることができたりと便利ですのでおすすめです。

よく使われる何番目を指定する擬似クラス一覧

この中でも特によく使われるのは「:first-child」、「:last-child」、「:nth-child()」です。
それでは一つずつ例を上げていきます。

:first-childの例

CSS

p:first-child {
	color: white;
}

HTML

<div>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
</div>

この場合は

<p>テキスト1</p>

が選択されます。

:first-of-typeの例

CSS

p:first-of-type {
	color: white;
}

HTML

<div>
	<h2>タイトル</h2>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
</div>

この場合は

<p>テキスト1</p>

が選択されます。

:last-childの例

CSS

p:last-child {
	color: white;
}

HTML

<div>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
</div>

この場合は

<p>テキスト3</p>

が選択されます。

:last-of-typeの例

CSS

p:last-of-type {
	color: white;
}

HTML

<div>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
	<figure><img src="pic.png" alt=""></figure>
</div>

この場合は

<p>テキスト3</p>

が選択されます。

:nth-child()の例

CSS

p:nth-child(2) {
	color: white;
}

HTML

<div>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
</div>

この場合は

<p>テキスト2</p>

が選択されます。

:nth-of-type()の例

CSS

p:nth-of-type(2) {
	color: white;
}

HTML

<div>
	<h2>タイトル</h2>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
</div>

この場合は

<p>テキスト2</p>

が選択されます。

:nth-last-child()の例

CSS

p:nth-last-child(2) {
	color: white;
}

HTML

<div>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
</div>

この場合は

<p>テキスト2</p>

が選択されます。

:nth-last-of-type()の例

CSS

p:nth-last-of-type(2) {
	color: white;
}

HTML

<div>
	<p>テキスト1</p>
	<p>テキスト2</p>
	<p>テキスト3</p>
	<figure><img src="pic.png" alt=""></figure>
</div>

この場合は

<p>テキスト2</p>

が選択されます。

応用編

汎用性の高い「:nth-child()」のもう少し実戦的な例をご紹介いたします。

偶数の要素を選択する

CSS

ul li {
	background-color: #fff;
}

ul li:nth-child(even) {
	background-color: #ccc;
}

HTML

<ul>
	<li>テキスト1</li>
	<li>テキスト2</li>
	<li>テキスト3</li>
	<li>テキスト4</li>
	<li>テキスト5</li>
	<li>テキスト6</li>
	<li>テキスト7</li>
	<li>テキスト8</li>
</ul>

値には「キーワード値」というodd(奇数)、even(偶数)を入れることもできます。

3個間隔の要素を選択する

CSS

ul li {
	background-color: #fff;
}

ul li:nth-child(3n) {
	background-color: #ccc;
}

HTML

<ul>
	<li>テキスト1</li>
	<li>テキスト2</li>
	<li>テキスト3</li>
	<li>テキスト4</li>
	<li>テキスト5</li>
	<li>テキスト6</li>
	<li>テキスト7</li>
	<li>テキスト8</li>
</ul>

「n」に整数または0が入るときの値の位置を選択します。

2列の交互の要素を選択する

CSS

ul {
	display: flex;
	flex-wrap: wrap;
}

ul li { 
	width: 50%;
	background-color: #fff;
}

ul li:nth-child(4n+2),
ul li:nth-child(4n+3) {
	background-color: #ccc;
}

HTML

<ul>
	<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>
	<li>テキスト10</li>
	<li>テキスト11</li>
	<li>テキスト12</li>
</ul>

「:nth-child()」を複数指定して、様々なパターンにも対応可能です。

便利なツール

慣れないうちは下記のようなオンラインラインツールを使用することもおすすめです。

nth-childジェネレーター
http://www.bad-company.jp/nth-child/

まとめ

慣れるとすごく便利ですが、あまり複雑になり過ぎないようにすることがおすすめです。
なぜなら、自分一人だけが触るのなら良いのかもしれませんが、複数人でソースを触るのであれば他の人が解読するのに時間がかかってしまう事になりかねません。

シンプルにわかりやすいコードを書く事を心がけたいですね！

参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes