Q&A
（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
HTML
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>疑似要素の練習</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>疑似要素の練習</h1> <ul> <li>The first of ul.</li> <li>2nd child.</li> <li>3rd child</li> <li>4th child</li> <li>The last child.</li> </ul> </body> </html>
CSS
body{ padding: 1% 25%; font-family:sans-serif; } ul{ margin:25px auto 0; padding:12px; border:2px dotted grey; list-style-position: inside; font-size:1.5em; } li { margen: 0; padding: 15px; border-bottom:2px solid #224a6b; } :only-child { background-color: tomato; }
この時only-childは<body>に対して<h1>と<ul>の二つの要素があるので反映されないはずなのですが反映されてしまいます
ご指摘ありがとうございます。コードブロック囲んでみました
回答1件
0
ベストアンサー
この時only-childは<body>に対して<h1>と<ul>の二つの要素があるので反映されないはずなのですが
はい、<body>には適用されません。
検証ツールを使って確認してみると、<html>が:only-childの適用対象となっています。
CSS の
:only-child疑似クラスは、兄弟要素がない要素を表します（MDN）。
ということで、兄弟の存在しない<html>は:only-childに該当します。
投稿2020/09/05 11:21
総合スコア146018
<body>に適用されないのは、「<body>の子要素が2つあるから」ではなく、「<body>の兄弟に<head>があるから」です。
回答ありがとうございます！理解できました
あなたの回答
tips
プレビュー
