Q&A
（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
HTML&CSSの勉強をしています。
HTMLのulの部分のみ背景をbackground-colorで色を指定し、only-childを用いて実現したいのですが、ページ全体の色が変化してしまいます。どのようにすれば、ulの部分のみ、色を変えることができるのでしょうか。初歩的な質問ですがよろしくお願いいたします。
##HTMLのコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>疑似要素の練習</title> <link rel="stylesheet" href="style1.css"> </head> <body> <ul> <li>The first child of ul.</li> <li>2nd child</li> <li>3rd child</li> <li>4th child</li> <li>The last child.</li> </ul> <br> </body> </html>
##CSSのコード
body{ padding: 1% 25%; font-family: sans-serif; } ul{ margin: 25px auto 0; padding: 12px; border: 2px dotted gray; list-style-position: inside; font-size: 1.5em; } li{ margin: 0; padding: 15px; border-bottom: 2px solid #224a6b; } li:last-child{ border-bottom: none; } :only-child{ background-color: tomato; }
申し訳ございません。変更いたしました！
ulにだけ色を付けるなら、普通は直接そう(ul { background-color: ...})書けばいいので、「なぜ only-child を使おうと考えたのか」を説明されるといいかと思います。
初心者なのでonly-childの使い方、実装の仕様を知ろうと思い、この質問をさせていただいています。only-childは兄弟要素がないものを指定できると僕は解釈したのですが、狙った結果が得られなかったため、質問させていただいています。
すでにほかの方が説明されているように、html要素(文書全体)に only-child による背景色が付いているので、ul を兄弟要素のない状態にして only-child による背景色が付く状態にしても、単にページを眺めているだけそれを確認できません。開発者ツールなどを使用して確認する必要があります。
回答2件
0
仕様を確認すると以下の様に記述されています。
兄弟要素がない要素を表します
今回の場合兄弟要素にあたるものが下記のコードでわかる様存在しているのが原因かと思います。
HTML
1<li>2nd child</li> 2<li>3rd child</li> 3<li>4th child</li> 4<li>The last child.</li>
上記の部分を削ったとき<li>The first child of ul.</li>兄弟要素は存在しないのでbackground-colorが指定されるかと思います。
兄弟要素がある中で一番初めの要素をということでしたら:first-child:last-child または :nth-child(1):nth-last-child(1)を使用するといいと思います。
投稿2020/07/13 14:55
編集2020/07/13 14:56
総合スコア2070
only-childはulには適応されないということでしょうか？<li>The first child of ul</li>のみを指定したいわけではないのですが、その場合はどうしたらよいのでしょうか？質問がわかりづらく、申し訳ございません。
単純にul全てに背景色をつけたいのであるのであれば下記で良いかと。
ul{
background-color: tomato;
}
only-childの使い方が知りたかったため、この質問をさせていただいています。わかりにくくて、申し訳ございません！
0
ベストアンサー
:only-childは特に指定しない場合<html>要素にも効きます。
提示のコードの場合<br>要素もあるので<ul>要素には効きません。
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
投稿2020/07/13 15:25
総合スコア69400
<br>を消しても表示結果に変化がでませんでした。。。
htmlに背景色が付いているのだから当然変化を目で見るのはできないでしょう。デベロッパーツールで確認してください。（提示されたコードで<br>を消し多状態でulに作用していることは確認済みです）
https://www.youtube.com/watch?v=ghgNW-DcVuI&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=12 こちらの映像通りに演習をしているのですが、こちらの映像では<ul>に色がついている理由はなんなのでしょうか？(5:10~)
動画製作者に聞いて下さい。
私のPCはWindowsだからそういった変化が起きてしまっているのでしょうか。
確認をとってみます。お時間、お手数おかけしてしまい、申し訳ございませんでした。ありがとうございました！
> 私のPCはWindows
こちらもWindows Firefox/Chrome で確認済みです。
あなたの回答
tips
プレビュー
