質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

457閲覧

css 擬似クラスを反映したい

bonbonbobobon

総合スコア11

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/02 02:19

編集2019/07/02 03:34

前提・実現したいこと

前提:超初心者です(htmlとcssをyoutubeで勉強中)
対象:css
実現したい事:
https://www.youtube.com/watch?v=-tg8BlCv7Uk&list=PLjw-30bsJNVVa4PuUseJ5YPN1K2dJr041&index=11
上記youtubeの内容を実現したいです。
具体的には、「リンクをエリアとして選択した際に黄色になる」状態にしたいです。

発生している問題・エラーメッセージ

「mainクラスの子要素のリンク」および「mainクラスの子要素ではないリンク」に対する擬似要素が反映されません。
作成したcssファイルは画像の通りです。

lang

1body{ 2 font:1.1em/1.5 sans-serif; 3 padding-top:20px; 4} 5.main{ 6 border:1px solid; 7 margin: auto; 8 padding:10px 20px 20px; 9 width:760px; 10} 11a:link{ 12 color: crimson; 13} 14a:visited { 15 color: green; 16} 17a:hover{ 18 text-decoration: none; 19 background-color: lightgray; 20} 21:focus { 22 background-color: yellow; 23}

lang

1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>属性セレクタの練習</title> 6 <link rel="stylesheet" href="./style.css"> 7 </head> 8 <body> 9 <div class="main"> 10 <h1>Heading 1</h1> 11 <a href="#a">mainクラスの子要素のリンク</a> 12 <p> 13 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. 14 </p> 15 <input type="text"> 16 <h2>Heading 2</h2> 17 <p> 18 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<a href="#b">mainクラスの子要素ではないリンク</a> ut laoreet dolore magna aliquam erat volutpat. 19 </p> 20 <a href="#a">mainクラスの子要素のリンク</a> 21 <h2>Headiing 2</h2> 22 <p> 23 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,<a href="#c">mainクラスの子要素ではないリンク</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 24 </p> 25 <p> 26 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. 27 </p> 28 </div> 29 </body> 30</html>

試したこと

h1タグ直下のmainクラスの子要素のリンクをデベロッパツールで見たところ、
cssの部分が下記画像の通りでした。
イメージ説明
a:-webkit-any-linkというのが影響してcssファイルが反映されないのかな?
と素人考えですが思いました。
対策や原因など、解決にもしお力お貸し頂ける方いらっしゃれば助かります。

補足情報(FW/ツールのバージョンなど)

エディター:Sublime Text

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masshu

2019/07/02 02:22

とりあえず擬似要素のcssですがa:hover のようにスペースは削除してください。
masshu

2019/07/02 02:24

ついでに言うと擬似要素ではなく擬似クラスです。
masshu

2019/07/02 02:25

回答入れますね
m.ts10806

2019/07/02 02:29

>前提:超初心者です(htmlとcssをyoutubeで勉強中) 実際の要件とは違う話ですので「初心者アイコン」をつけてください
m.ts10806

2019/07/02 02:30

あとコードはテキストでご提示ください。 マークダウンを利用すると「コピペ」ができるようになるのでコードの再現確認が楽になります。 https://teratail.com/help#about-markdown 質問は編集できますので適宜ご対応ください。
mepon

2019/07/02 02:58

cssがstyle.cssで定義されているならば style.cssはhtmlと同じフォルダ内にありますか?
bonbonbobobon

2019/07/02 03:11

meponさん ご指摘ありがとうございます! 同じフォルダ内にあること、確認しました。
guest

回答3

0

反映されない時は「構文が間違っている」「外部CSSのパスが間違っている」ことがほとんどなので、
もしデベロッパツールで404エラーが出ていなければ構文を疑ってください。
構文チェック機能のあるエディタの使用が最も良いですが、下記のような構文チェックサービスもあります。

追記

コードは提示のものを利用し、
GoogleChrome バージョン: 75.0.3770.100(Official Build) (64 ビット)
にて、リンククリックした後にHeading 2の「mainクラスの子要素のリンク」にmouse hoverした状態の画面キャプチャです。
イメージ説明

確かに「user agent stylesheet」は気になるところではありますが-webkit-linkって確かデフォルトの指定なので、他でcolor指定されていたらきちんと上書きされて私のコードのように無効になるはずです。

bodyに背景色や文字サイズを入れて「CSSが本当にちゃんと反映されているか」確認してみては如何でしょうか。

投稿2019/07/02 02:34

編集2019/07/02 03:42
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

擬似要素 → 擬似クラス

a: hover → a:hover
擬似クラスにスペース(空白)は要りません。

投稿2019/07/02 02:26

masshu

総合スコア83

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bonbonbobobon

2019/07/02 02:39 編集

ご回答ありがとうございます! いろいろ勉強になります。。 スペース消してみましたが、反映されませんでした。。
masshu

2019/07/02 02:39

いえいえとんでも!自分も初心者なのでお互い頑張りましょ! あと、感謝の言葉は大切やと思うんですけど、問題が解決したかどうかを教えていただけると助かります!
masshu

2019/07/02 02:43 編集

おっふ入れ違い・・・ なるほど、mtsさんのサービス使ってチェックしてみました? あ、あと修正後のCSS読み込ませてからキャッシュ削除してみてください!
m.ts10806

2019/07/02 02:43

HTMLも含めて提示してもらってコードはコードブロックにしてもらったほうがいいかもしれませんね。 基本的に行頭は詰められますし
masshu

2019/07/02 02:45

>mtsさん ですね、やっぱ再現できるようにしてもらったほうがグッドですね・・・
m.ts10806

2019/07/02 02:46

masshuさん はい。今提示されているCSSをそのままだと構文エラーはないので。 HTMLの方がきちんとなってなければそれはそれで「正しく反映されない」ですしね。
masshu

2019/07/02 02:57

修正ありがとうございまーす! codepenで確認したところ挙動には問題なかったんですよねぇ… https://codepen.io/masshu/pen/BgrOMg キャッシュクリアはどうだっだじゃろ
bonbonbobobon

2019/07/02 03:11

masshuさん mts10806さん ご指摘ありがとうございます。 また、コメント遅くなり申し訳ありません! キャッシュクリアして見ましたが、状況変わらずでした。。 それと、htmlとcssファイルは同じフォルダにあります。 お時間いただいて申し訳ないのですが、 他に考えられる点はありますでしょうか。
masshu

2019/07/02 03:14

ンンン、擬似クラス以外のCSSは反映されてますか?
m.ts10806

2019/07/02 03:14

念のための確認ですが「テキスト」という文言は実際のCSSにはないですよね? 提示するのは実際のコードだけにしてもらえると助かります。
m.ts10806

2019/07/02 03:15

あと念のため「どういう挙動になれば想定通りか」を文章で書いてもらったほうがいいかもしれません。
masshu

2019/07/02 03:22 編集

ワンチャンエンコがutf-8じゃない可能性も含めて cssの内容の先頭に @charset "UTF-8"; って入れてみたらどうじゃろ
bonbonbobobon

2019/07/02 03:40

masshuさん mts10806さん 解決しました!!! 実現したいこと:「リンクをエリアとして選択した際に黄色になる」状態になりました。 初歩的なミスで、似た内容のファイルで格闘しました。。。 お騒がせして申し訳有りませんでした。 お忙しい中、お時間つかっていただき、本当にありがとうございます!
masshu

2019/07/02 03:47

お?BAありがとうございます。 解決したのはよかったんですが結局原因はなんだったんですかー?
m.ts10806

2019/07/02 03:47

別のファイルを編集していた、って感じでしょうか。 解決されたようで何よりです。
guest

0

正しいファイルで読み込み、解決しました。

投稿2019/07/02 03:42

bonbonbobobon

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問