下記チュートリアルの「2. テーブルの背景色を交互に変える方法」について、奇数行の指定がなぜこうなるのかが理解できません。
リンク内容
理解できないCSSがここです。
tr:nth-child(odd) {
background: #31A9EE; /* 奇数行の背景色を指定する */
と言いますのも前述のテーブルの場合、<table>タグの1番目の要素に、<caption>タグを噛ませているためです。
別の例ですが下図のように、「nth-child 」は「nth-of-type」と違って、該当タグのtrだけではなく並列する要素のすべてが対象に含まれるはず。
そしてoddは奇数番目なので、まずは下記に絞られるはずです。
1番目の要素. <caption>テーブルタイトル</caption>
3番目の要素. 「1行目 (左の列)」から始まる<tr>タグ
5番目の要素. 「3行目 (左の列)」から始まる<tr>タグ
7番目の要素. 「5行目 (左の列)」から始まる<tr>タグ
‥‥
さらにここから、<tr>タグだけに絞られるので、実際に青背景色のCSSが当たるのは、
3番目の要素. 「1行目 (左の列)」から始まる<tr>タグ
5番目の要素. 「3行目 (左の列)」から始まる<tr>タグ
7番目の要素. 「5行目 (左の列)」から始まる<tr>タグ
‥‥
になると想定します。
なぜ親要素から数えて、同じく奇数番目の要素である<caption>タグが無視されるのでしょう?
これが「nth-of-type」での指定なら理解できるのですが‥‥
前述のチュートリアルだけではなく、所持している参考書でも同様の結果となっていたので、混乱しております。
回答2件
あなたの回答
tips
プレビュー