only-childがHTML全体に反映されてしまう。

HTML
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>擬似要素の練習</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <ul>
10    <li>The first child of ul.</li>
11    <li>2nd child</li>
12    <li>3rd child</li>
13    <li>4th child</li>
14    <li>The Last child</li>
15  </ul>
16</body>
17</html>

現在、このようなHTMLファイルに以下のCSSのファイルを読み込んでいます。

CSS
1body {
2  padding: 1% 25%;
3  font-family: sans-serif;
4}
5ul {
6  margin: 25px auto 0;
7  padding: 12px;
8  border: 2px dotted grey;
9  list-style-position: inside;
10  font-size: 1.5em;
11}
12li {
13  margin: 0;
14  padding: 15px;
15  border-bottom: 2px solid #224a6b;
16}
17
18:only-child {
19  background-color: tomato;
20}

この場合に、:only-childタグがHTML全体に反映されてしまっています。
bodyの子要素はulだけなので本来はbody部分のみに反映されるはずなのですが。。
どなたかお教えいただけると幸いです。

kei344

2019/03/29 07:58

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

ryo1101

2019/03/29 18:03

すみません、教えていただきありがとうございました。以後気をつけます。

yoshinavi

2019/03/30 01:40

body部分にtomato以外の背景色を設定すると、「maisumakun」さん「kei344」さんの回答にあるように、適用されている範囲が分かるかと思います。

行動規範の内容に同意します

回答3件

ベストアンサー

bodyの子要素はulだけなので本来はbody部分のみに反映されるはずなのですが。。

:only-child は「兄弟要素の無い要素」に反映されるので、「body部分のみ」にはなりません。
（書くなら「bodyの子要素はulだけなので本来はul部分のみに反映されるはずなのですが。。」になるかと思います）

【:only-child - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:only-child

CSS の :only-child 疑似クラスは、兄弟要素がない要素を表します。 :first-child:last-child または :nth-child(1):nth-last-child(1) と同じですが、詳細度はより低くなります。

投稿2019/03/29 18:37

kei344

総合スコア69407

ryo1101

2019/03/31 13:50

質問の書き方のご指摘までありがとうございます。まさにその通りで、Youtubeでの学習時に受けた説明もbodyの子要素はulだけなのでul部分にのみ反映される、だったのですがまったく同じコードを書いても同じ結果を得られず困惑しています。ちなみに```ul:only-child```というように記述するとul部分にのみ反映させることができました。

kei344

2019/03/31 13:57

どの教材で学習されたかはわかりませんが、仕様上はhtml要素にも反映されるので、教材のほうに問題があるかもしれません。（提示するコードを間違っているとか、動画の作成時に別のコードを使っているなど）

行動規範の内容に同意します

この場合に、:only-childタグがHTML全体に反映されてしまっています。

<html>は兄弟要素がないので、:only-childは<html>に対しても適用されます。

なお、<body>は兄弟に<head>があるので対象外です。

投稿2019/03/29 08:03

maisumakun

総合スコア145184

ryo1101

2019/03/29 18:18 編集

回答ありがとうございます。現在Youtubeの動画で学習しているのですが、動画では全く同じコードで:only-childのbackground-colorをtomatoと指定するとulのブロック要素のみがトマト色になっているんです。その理由は:only-childは唯一の子要素に対して適用され、今回の場合bodyの子要素がulだけであるためulのブロック要素のみ背景色が反映されると説明を受けたのですが、まったく同じコードを書いても結果が異なるため今回質問させていただきました。ご指摘をいただいたところは理解できました。しかしまだ引っかかるところがあり、よろしければお教え願いたいです。

行動規範の内容に同意します

僕も全く同じ状況です
テックアカデミーのYouTubeですよね？

投稿2021/03/17 08:08