質問: 下記チュートリアルの「2. テーブルの背景色を交互に変える方法」について、奇数行の指定がなぜこうなるのかが理解できません。 リンク内容 理解できないCSSがここです。 tr:nth-child(odd) { background: #31A9EE; /* 奇数行の背景色を指定する */ と言いますのも前述のテーブルの場合、タグの1番目の要素に、タグを噛ませているためです。 別の例ですが下図のように、「nth-child 」は「nth-of-type」と違って、該当タグのtrだけではなく並列する要素のすべてが対象に含まれるはず。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/122a2c031e90b1fb075cd1c2d2b25968.png) そしてoddは奇数番目なので、まずは下記に絞られるはずです。 1番目の要素. テーブルタイトル 3番目の要素. 「1行目 (左の列)」から始まるタグ 5番目の要素. 「3行目 (左の列)」から始まるタグ 7番目の要素. 「5行目 (左の列)」から始まるタグ .... さらにここから、タグだけに絞られるので、実際に青背景色のCSSが当たるのは、 3番目の要素. 「1行目 (左の列)」から始まるタグ 5番目の要素. 「3行目 (左の列)」から始まるタグ 7番目の要素. 「5行目 (左の列)」から始まるタグ .... になると想定します。 しかし、実際の検証結果はこのようになっております。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/65076d0018e129ab5ab48e9c146b30dd.png) なぜ親要素から数えて、同じく奇数番目の要素であるタグが無視されるのでしょう? これが「nth-of-type」での指定なら理解できるのですが.... 前述のチュートリアルだけではなく、所持している参考書でも同様の結果となっていたので、混乱しております。
回答: なぜtable直下にtr要素を許可しているのに勝手にtbodyが入るのか? その疑問はわかります。 歴史的な経緯を言うと、HTML4 時代は tbody 要素は省略不可で、table 直下に直接 tr が来ることはありませんでした。タグを書かなくても tbody 要素が存在する状態です。 そのため、HTML5 が普及した今日でも主要ブラウザはとりあえずタグがなくとも tbody を補ってしまうようです。 勝手に補わないよう、XHTML 形式で認識させるとどうなるか? ちゃんと思い通りになります。 !イメージ説明