先生と生徒の会話形式で理解しよう

生徒

「HTMLで同じタグが並んでいるときに、CSSで特定の順番だけにスタイルを付けたいんですが、どうすればいいですか？」

先生

「その場合は、:first-child や :last-child、:nth-child() といったCSSのセレクタが使えますよ。」

生徒

「なんだか難しそうですが、使い方を知りたいです！」

先生

「それでは、ひとつずつ例を見ながらわかりやすく説明していきましょう！」

1. CSSセレクタとは？

まず、CSSセレクタとはHTMLのどの部分にスタイル（見た目）を適用するかを指定するものです。タグの名前やクラス名などを使って指定します。

今回紹介する:first-childや:last-childなどは「疑似クラス」と呼ばれ、特定の条件に一致する要素だけを選んでデザインできます。

2. :first-child の使い方

:first-child（ファースト・チャイルド）は、親要素の中で最初に出てくる子要素にだけCSSを適用します。


<style>
li:first-child {
    color: red;
}
</style>

<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>

ブラウザ表示

この例では、最初の「りんご」だけが赤くなります。

3. :last-child の使い方

:last-child（ラスト・チャイルド）は、親要素の中で最後に出てくる子要素にCSSを適用します。


<style>
li:last-child {
    color: blue;
}
</style>

<ul>
<li>さくらんぼ</li>
<li>もも</li>
<li>すいか</li>
</ul>

ブラウザ表示

この例では、「すいか」だけが青色になります。

4. :nth-child() の使い方

:nth-child()（エヌス・チャイルド）は、数字を指定することで「何番目の要素」にスタイルを当てられます。たとえば、3番目のliだけ色を変えたいときに使えます。


<style>
li:nth-child(3) {
    color: green;
}
</style>

<ul>
<li>バナナ</li>
<li>キウイ</li>
<li>メロン</li>
<li>パイナップル</li>
</ul>

ブラウザ表示

この場合、「メロン」だけが緑色になります。

5. :nth-child(odd)・:nth-child(even) の使い方

:nth-child(odd)は奇数番目（1番目・3番目・5番目...）の要素に、:nth-child(even)は偶数番目（2番目・4番目・6番目...）の要素に適用されます。


<style>
li:nth-child(odd) {
    background-color: #f0f0f0;
}
li:nth-child(even) {
    background-color: #d0f0d0;
}
</style>

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>

ブラウザ表示

この例では、1番目・3番目・5番目がグレー、2番目・4番目が薄い緑になります。

6. :nth-child(3n+1)のような応用

nth-childの()の中には数式も使えます。3n+1とすると「1番目、4番目、7番目…」と、3つごとにスタイルが適用されます。


<style>
li:nth-child(3n+1) {
    font-weight: bold;
}
</style>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>

ブラウザ表示

このように柔軟にデザインを調整できます。

7. HTMLの構造が重要！間に別のタグがあると効かない

:first-child や :nth-child() は「親の中の順番」で判断されるため、間に違うタグが入っていると期待通りに動作しないことがあります。


<style>
p:first-child {
    color: red;
}
</style>

<div>
<h2>見出し</h2>
<p>これは段落です</p>
</div>

ブラウザ表示

この場合、pは2番目なので赤くなりません。

まとめ

今回の記事では、CSSでよく使われる子要素セレクタである:first-child、:last-child、:nth-child()といった疑似クラスの基本から応用までを、具体例を交えながら丁寧に学んできました。これらの疑似クラスは、HTMLの構造に合わせて特定の順番の要素だけにスタイルを適用できるという、とても便利な仕組みです。特に、同じタグが連続するリストや、繰り返しが多いセクションでは、CSSの子要素セレクタが大きな力を発揮します。デザインに規則性やアクセントをつけたいとき、あるいは強調したい部分を明確にするときに欠かせない存在です。

:first-childは親要素の中で最初の子だけにスタイルを当てたいときに使われ、:last-childは最後の子要素に対してのみ作用します。これらはどちらも「その親要素の中での位置」が判断材料となるため、余計なタグが間に挟まると意図した結果にならないことがある点にも注意が必要です。一方、:nth-child()は数字や数式を使って順番を柔軟に指定でき、奇数・偶数のスタイル分けや、規則的な間隔でアクセントをつけたい場面にも役立ちます。特定の要素だけ背景色を変えたり、一定の間隔で色やサイズを変えたりと、幅広い演出が可能になります。

また、:nth-child(odd)や:nth-child(even)を使えば、奇数番目・偶数番目の要素に簡単に交互のスタイルをつけることができます。リストや表の見やすさを上げたい場面でも重宝されるテクニックです。さらに、nth-childの中に3n+1や2n+2といった数式を入れることで、規則的なパターンをより細かくコントロールできます。これにより、デザインの幅が大幅に広がり、サイト全体の統一感や読みやすさも向上します。

ただし、CSSの疑似クラスはHTMLの構造に強く依存するため、思った通りにスタイルが当たらないときは、HTMLの親子関係や順番をしっかり確認する必要があります。見た目としては最初に見えている要素でも、HTML上では別のタグが間にあるため:first-childが効かない、といったケースは珍しくありません。そのため、CSSを使う際は必ずHTMLの構造を正確に把握することが大切です。子要素セレクタは正しく使えばとても強力ですが、HTMLとの関係性を理解してこそ真価を発揮するプロパティです。

今回学んだ:first-child・:last-child・:nth-child()は、どれも初心者にとって扱いやすく、かつ実務でも頻繁に利用される重要なCSSテクニックです。リスト・表・カードレイアウト・ナビゲーションメニューなど、あらゆるWebデザインで役立つため、自然に使いこなせるようになるとCSSの表現力が格段に広がります。順番によってスタイルを変えるという発想は、一度慣れてしまえば非常に便利で、デザインのメリハリをつけるためにも欠かせない考え方です。ぜひ、今回の知識をさまざまな場面で活用し、より洗練されたスタイルづくりに挑戦してみてください。

子要素セレクタのサンプルコード


<style>
.sample-list li:first-child {
    color: red;
}
.sample-list li:last-child {
    color: blue;
}
.sample-list li:nth-child(odd) {
    background-color: #f8f8f8;
}
.sample-list li:nth-child(even) {
    background-color: #e0f8e0;
}
</style>

<ul class="sample-list">
<li>一つ目の項目</li>
<li>二つ目の項目</li>
<li>三つ目の項目</li>
<li>四つ目の項目</li>
<li>五つ目の項目</li>
</ul>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「今回の子要素セレクタ、最初は難しそうだと思っていましたが、仕組みがわかると便利ですね。順番ごとにスタイルを当てられるのはとても助かります。」

先生

「そうですね。リストや表では特に活躍しますし、nth-child()を使うとさらに柔軟なデザインが可能になりますよ。」

生徒

「oddやevenで交互に色をつけたり、3n+1でリズムを作ったりと、思ったより使い道が多いんですね。」

先生

「そうです。規則的なパターンを作るときには非常に便利なテクニックです。ただし、HTMLの構造を理解していることが前提になるので、そこだけ注意してくださいね。」

生徒

「HTMLの順番がずれていると意図したセレクタが効かなくなるのは、とても重要なポイントだと思いました。」