質問: ### 前提・実現したいこと 前提:超初心者です(htmlとcssをyoutubeで勉強中) 対象:css 実現したい事: https://www.youtube.com/watch?v=-tg8BlCv7Uk&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=11 上記youtubeの内容を実現したいです。 具体的には、「リンクをエリアとして選択した際に黄色になる」状態にしたいです。 ### 発生している問題・エラーメッセージ 「mainクラスの子要素のリンク」および「mainクラスの子要素ではないリンク」に対する擬似要素が反映されません。 作成したcssファイルは画像の通りです。 ``` body{ font:1.1em/1.5 sans-serif; padding-top:20px; } .main{ border:1px solid; margin: auto; padding:10px 20px 20px; width:760px; } a:link{ color: crimson; } a:visited { color: green; } a:hover{ text-decoration: none; background-color: lightgray; } :focus { background-color: yellow; } ``` ``` 属性セレクタの練習 Heading 1 mainクラスの子要素のリンク Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Heading 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinciduntmainクラスの子要素ではないリンク ut laoreet dolore magna aliquam erat volutpat. mainクラスの子要素のリンク Headiing 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,mainクラスの子要素ではないリンク consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ``` ### 試したこと h1タグ直下のmainクラスの子要素のリンクをデベロッパツールで見たところ、 cssの部分が下記画像の通りでした。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/09e72b074b40827d78b413c9aa90b316.jpeg) a:-webkit-any-linkというのが影響してcssファイルが反映されないのかな? と素人考えですが思いました。 対策や原因など、解決にもしお力お貸し頂ける方いらっしゃれば助かります。 ### 補足情報(FW/ツールのバージョンなど) エディター:Sublime Text
回答: 擬似要素 → 擬似クラス a: hover× → a:hover 擬似クラスにスペース(空白)は要りません。