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

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

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

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

HTML5

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

解決済

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

megu9859
megu9859

総合スコア0

CSS3

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

HTML5

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

2回答

2評価

2クリップ

8閲覧

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2019/04/16 21:59

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

2019/04/16 22:00

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

2019/04/16 23:48

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

2019/04/17 01:31 編集

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

2019/04/17 04:12 編集

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

2019/04/17 04:15

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

2019/04/17 04:18

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

2019/04/17 04:32

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

2019/04/17 10:27

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

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

HTML5

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