Q&A
前提・実現したいこと
cssで疑似要素のonly childを使ってulの中のみに指定した色を反映させたい。
発生している問題・エラーメッセージ
画面全体が指定した色になってしまう。
CSS
試したこと
https://www.youtube.com/watch?v=ghgNW-DcVuI&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=12
youtubeで上記のURLの動画を見ながら勉強しており、コードの打ち間違えがないかどうか、動画を見ながら確認した。
補足情報（FW/ツールのバージョンなど）
プログラミング初心者です。sublime text3を使用しています。下に実際に自分が書いたコードを入力しました。どこが原因なのか教えてください。よろしくお願いします。
[HTML]
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>I study programing</title> <link rel="stylesheet" type="text/css" href="style.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> </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;
}
:only-child{
background-color: tomato;
}
回答1件
0
Ref: https://developer.mozilla.org/ja/docs/Web/CSS/:only-child
最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。
動画の時期とはブラウザの動作が変わり、親のない要素（ <html> ）にも適用されていると思われます。
タイトル動作したければ、 <body> の中にあるものに限定して、 body :only-child { でしょうか
投稿2020/09/12 03:48
編集2020/09/12 04:03
総合スコア1531
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。