【CSS】最初の子要素に特定のスタイルを適用する方法

※実装中に悩んだので備忘録として投稿する。

下のコードは全thタグの文字に青色が適用されている。
ここから、一番上のthタグの文字「Python」の色を変更したい。

<table>
    <tbody>
        <tr><th>Python</th></tr>
        <tr><th>Java</th></tr>
        <tr><th>Swift</th></tr>
        <tr><th>MySQL</th></tr>
        <tr><th>HTML/CSS</th></tr>
        <tr><th>Javascript</th></tr>
        <tr><th>AWS</th></tr>
    </tbody>
</table>

th {
    text-align: left;
    color: blue;
}

【失敗例】

th:first-childで先頭のthを指定する考えだったが、「trタグ要素の中の一番最初のthタグを指定」という意味になってしまい全てのthにデザインが適用されてしまった、、、

th:first-child {
    color:red;
}

【成功例】

「tableタグの中にある一番最初のtrタグを選択し、さらにその子要素であるthを指定」と視点を1階層上にずらしてあげることによって先頭の行だけ文字の色を変更することが可能になる。

th {
    text-align: left;
    color : blue;
}

tr:first-child th {
  color: red;
}

実行結果

See the Pen 先頭のthの指定(成功) by devkamura (@kaesjfqa-the-styleful) on CodePen.