質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

344閲覧

この「nth-child 」の指定結果が理解できません

megu9859

総合スコア22

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

3グッド

2クリップ

投稿2019/04/16 21:06

下記チュートリアルの「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」での指定なら理解できるのですが‥‥
前述のチュートリアルだけではなく、所持している参考書でも同様の結果となっていたので、混乱しております。

gzrita, s8_chu👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/04/16 21:59

>並列する要素のすべてが対象に含まれるはず。 「はず」の根拠はどこでしょう?出典(出来れば公式ドキュメント)を質問本文に明示してください
m.ts10806

2019/04/16 22:00

そして、過去質問を放置のまま次の質問を立てられるのはなぜですか? 未解決質問が多くあるのはよくないです。ひとつひとつきちんと解決させてください
megu9859

2019/04/16 23:48

下記にソースがあります。 https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child 言い方の違いだと思いますが、並列する要素 = 兄弟要素のことを示しました。 Teratailでは、質問を同時にすることが禁じられているのでしょうか? 次の質問をするためには、回答期間を〆なければならないのでしょうか? 私がまだベストアンサーを決めていない最も古い質問は、まだ4日前の出来事なのですが‥‥ 4日間でなぜそこまで苛立たれているのかは分かりかねますが、ならば論拠となるソースを明示願います。
m.ts10806

2019/04/17 01:31 編集

(2回目)質問本文に明示してください 苛立ってはいませんよ。全ての質問に回答がついているにも関わらず何も反応をしない姿勢を指摘しているだけです。 回答者側から見ると未解決質問が溜まってきている人は「解決する気がないんだな」という印象になります。あと理解してないのに解決済みにする人、解決したのに何も反応しない人。 https://teratail.com/help/question-tips#questionTips4-2
megu9859

2019/04/17 04:12 編集

ならば何時間以内にベストアンサーを決めれば、mts10806さんはご満足されるのでしょうか。 サービスの利用規約に定めのない、個人的な価値観を全員に強制するのはご遠慮願います。私の質問はまだたったの4日しか経過しておらず、あなたに「遅いから今すぐにベストアンサーを決めろ」「同時に複数の質問はやめろ」と強制される必要性はありません。 ご助言はありがたく頂戴しますが、「指摘」やら「明示」やら、あなたは一体どこからの目線でものを話されているのですか。顔の見えないウェブだからといって、慇懃無礼に振るまうのはどうかと思いますが。関わりたくないのでできれば、私をブロックしていただくとありがたいです。
m.ts10806

2019/04/17 04:15

言い争いたいのでしたら他所でどうぞ。ここはあくまで質問への追記修正依頼のコメント欄です。 最初に「出典を質問本文に明示してください」と指摘したもののそのままコメントで返されたので2回同じことを指摘したまでです。「指摘」で伝わらないなら「依頼」で読み替えていただいても構いません。 ご存じないのかもしれませんが、質問は編集できますし、こちらのコメント欄はデフォルト非表示であるため、質問本文との関連性はほぼないと言っていいです。 「はず」が思い込みであるかどうかはこの質問内容からでは誰にも分かりません。なので質問本文に明示する必要があります。 質問本文の説明不足や不備は指摘していますが、喧嘩をしたいとか責めたいとか追い込みたいわけではなく、teratailの質問内容として質問者さんがきちんと書けているかどうかは「ヘルプ」「質問するときのヒント」「推奨されない質問」のページの項目を元にコメントしています。個人的価値観などと決めつけられる謂れは全くありません。
m.ts10806

2019/04/17 04:18

「回答がつかなかったりついたのに放置したまま次の質問を次々と立てるのは良くない」と指摘しているだけで、「何時間以内に解決してね」とは思っていません。 回答者観点から「解決する気ないな」となればアドバイスは得られにくくなるのは当然ですし、回答を得られずに困るのは質問者さんですよね。 この手(未解決質問放置質問)の指摘は私に限らずよく指摘は行われてますよ。
m.ts10806

2019/04/17 04:32

追記されたんですかね。 ブロック機能は今のところありませんので。
megu9859

2019/04/17 10:27

ありがとうございます。承知いたしました。
guest

回答2

0

ベストアンサー

<table>の中に直接<tr>を書いても、HTMLの処理としては<table>の下に<tbody>があって、その中に<tr>があるものと解釈されます。一方で、<caption><table>直下に置かれます。

そのため、tr:nth-child(odd)に、<tr>と兄弟要素とならない<caption>は数えられません。

投稿2019/04/16 22:18

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

megu9859

2019/04/20 06:16

ご回答いただきまして誠にありがとうございます。自動的に<tbody>が挿入されることを初めて知り、「そういうことだったんだ」と納得がいきました。 ※ご連絡が遅れまして申し訳ございません。
guest

0

なぜtable直下にtr要素を許可しているのに勝手にtbodyが入るのか?
その疑問はわかります。
歴史的な経緯を言うと、HTML4 時代は tbody 要素は省略不可で、table 直下に直接 tr が来ることはありませんでした。タグを書かなくても tbody 要素が存在する状態です。
そのため、HTML5 が普及した今日でも主要ブラウザはとりあえずタグがなくとも tbody を補ってしまうようです。

勝手に補わないよう、XHTML 形式で認識させるとどうなるか?
ちゃんと思い通りになります。
イメージ説明

投稿2019/04/17 04:19

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

megu9859

2019/04/20 06:18

ご回答いただきまして誠にありがとうございます。これまでの背景を知ることで、ますます理解を深めることができました。そのうえ、表作成までしていただき、心から感謝したいです。 ※ご連絡が遅れまして申し訳ございません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問