CSSのセレクタに「table > tr」と指定しても効かないらしい

先日、『HTML解体新書』という本を読んでいたのですが、かなり基本的なところで「あれ？　そうだったっけ？」と思ったのでメモ。

タイトルのように、HTMLにおいて、

<table>
  <tr><th>元号</th><th>西暦</th></tr>
  <tr><td>明治</td><td>1868年</td></tr>
  <tr><td>大正</td><td>1912年</td></tr>
  <tr><td>昭和</td><td>1926年</td></tr>
  <tr><td>平成</td><td>1989年</td></tr>
  <tr><td>令和</td><td>2019年</td></tr>
</table>

とし、CSSで、

table > tr > td{
  background-color: #888;
}

としても、スタイルが反映されません。

というのも、tbodyタグが省略されている書き方になっていますが、ブラウザではtbodyタグがある認識となっているためです。
つまり、ブラウザ自身は、

<table>
  <tbody>
    <tr><th>元号</th><th>西暦</th></tr>
    <tr><td>明治</td><td>1868年</td></tr>
    <tr><td>大正</td><td>1912年</td></tr>
    <tr><td>昭和</td><td>1926年</td></tr>
    <tr><td>平成</td><td>1989年</td></tr>
    <tr><td>令和</td><td>2019年</td></tr>
  </tbody>
</table>

と解釈しいるため、tableの直下のタグはtrタグではなく、tbodyタグとなっているからです。

なのでやるとするなら、「table > tbody > tr」と記載しないといけないわけですが、CSSでこういう記載をするぐらいならtbodyタグをHTMLのほうでも書いた方がいいのではないかと思います(「table tr」でもいいですが、それだとtableの中にtableがあるとうまくいかないです。そんな書き方をするのはそれはそれでどうかとは思いますが…)。

以下、簡単なサンプル。

See the Pen
Untitled by amano225 (@amano225)
on CodePen.

HTML解体新書-仕様から紐解く本格入門

posted with AmaQuick at 2022.04.29

太田良典(著), 中村直樹(著)
ボーンデジタル (2022-04-19T00:00:01Z)

￥2,881 (中古品)

Amazon.co.jpで詳細を見る