質問: ### 前提・実現したいこと 初心者です。勉強始めたばかりです。 https://www.youtube.com/watch?v=-tg8BlCv7Uk この動画でCSSの疑似要素を勉強していました。 focusで選択した部分の色だけを変えたいです。 ### 発生している問題 ``` focusで選択したところの色を変えようとしたのですが、ページ全体の色が変わってしまいました。 ``` ### 該当のソースコード ``` 属性セレクタの練習 Heading 1 mainクラスの子要素のリンク Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.mainクラスの子要素ではないリンク Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. mainクラスの子要素のリンク Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. mainクラスの子要素ではないリンク Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ``` ``` body{ font:1.1em/1.5sans-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; } ``` ### 試したこと ファイルをグーグルクロームで開くとうまくいきました。しかし、インターネットエクスプローラーだとページ全体の色が変わってしまいました。 ### 補足情報(FW/ツールのバージョンなど) windows7でやってます。
回答: (手元にIEの環境がないため推測になってしまうのですが...) 擬似クラスは基本的に特定の要素に対して設定するもののため、 質問者様が他のセレクタで書いているように `要素:擬似クラス` の形で指定するのが一般的かと思います ↓の指定を `a:focus` に変更したり、逆に正常に動いている擬似クラスを `:visited` などの形に変更してIEやChromeでの動作を確認すれば、 何が原因で意図しない動作になってしまっているのか、問題の切り分けができそうに思えますが、いかがでしょうか? ``` :focus{ background-color: yellow; } ``` 参考