CSSの:first-child疑似クラスとは？基本構文と実用的なサンプルコードを解説

CSSの:first-child疑似クラスは、ある親要素の中で「最初の子要素」に該当する要素を選択するためのセレクタです。リストの先頭項目だけ背景色を変えたい場合や、テーブルの左端のセルだけ罫線を消したい場合など、細かいスタイル調整に役立ちます。

基本構文

:first-child疑似クラスの基本的な書き方は以下のとおりです。

:first-child {
    /* スタイル宣言 */
}

このセレクタは、対象となる要素が親要素の最初の子要素である場合にのみ適用されます。なお、:first-childは:nth-child(1)と同じ意味を持つため、状況に応じて使い分けることも可能です。

使用例1：テーブルへの適用

まずは、テーブルの各セルに:first-child疑似クラスを適用する例を見てみましょう。このサンプルでは、各行の最初のセル（左端）だけ左側の罫線を非表示にしています。

<!DOCTYPE html>
<html>
<head>
<style>
table {
    margin: auto;
    padding: 10px;
    border: hsl(54, 100%, 50%) solid 13px;
    border-radius: 6px;
    text-align: center;
}
td, th {
    border-left: 2px solid black;
    border-top: 3px solid black;
}
td:first-child, th:first-child {
    border-left: none;
}
th {
    background-color: lightblue;
    border-top: none;
}
caption {
    margin-top: 3px;
    background-color: purple;
    caption-side: bottom;
    color: white;
    border-radius: 20%;
}
</style>
</head>
<body>
<table>
<caption>MCA Syllabus</caption>
<tr>
<th colspan="4">Subjects</th>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>Java</td>
<td>C#</td>
</tr>
<tr>
<td>MySQL</td>
<td>PostgreSQL</td>
<td>MongoDB</td>
<td>SQLite</td>
</tr>
</table>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

:first-child疑似クラスを使用する前：

:first-child疑似クラスを使用した後：

使用例2：リストへの適用

続いて、リスト要素に:first-child疑似クラスを適用する例を紹介します。あわせて:nth-child()や:last-childを組み合わせることで、先頭・2番目・末尾の項目それぞれに異なるスタイルを指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
* {
    font-size: 1.1em;
    list-style: circle;
}
li:first-child {
    background-color: seashell;
    font-family: cursive;
}
li:nth-child(2) {
    background-color: azure;
    font-family: "Brush Script Std", serif;
}
li:last-child {
    background-color: springgreen;
    font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>Apache Spark</h2>
<ul>
<li>Apache Spark is a lightning-fast cluster computing technology, designed for fast computation.</li>
<li>It is based on Hadoop MapReduce.</li>
<li>It extends the MapReduce model to efficiently use it for more types of computations.</li>
</ul>
</body>
</html>

出力結果

上記のコードを実行すると、各リスト項目に異なる背景色とフォントが適用され、次のように表示されます。

まとめ

:first-child疑似クラスを使えば、JavaScriptなどに頼らずCSSだけで「最初の子要素」を簡単に装飾できます。テーブルの端の罫線調整やリストの先頭項目の強調など、実務でも頻繁に使われるテクニックなので、ぜひ覚えておきましょう。すべてのモダンブラウザで問題なく動作するため、安心して利用できます。