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

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

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

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

Q&A

解決済

2回答

1648閲覧

CSS擬似要素の反映画されない

yuura

総合スコア1

CSS

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

0グッド

0クリップ

投稿2021/11/30 03:13

編集2021/12/05 15:56

イメージ説明### 発生している問題
テックアカデミーのはじめてのCSS入門講座を拝見しています。2-6擬似要素(CSSセレクタ)
CSSにて擬似要素の :link や :visitedを打ち込んだのですが反映されません。
私はエディタをsublimetextを使用しております。
文字をきちんと打てていれば色が変わるのですが色も変わりません。

お手数お掛けしてすみません
ここに貼り付けたので宜しいでしょうか?

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>HTMLの練習</title> 6<link rel="stylesheet" type="text/css" href="style.css"> 7</head> 8<body> 9<div class="main"> 10<h1>Heading 1</h1> 11<a href="#a">mainクラスの子要素のリンク</a> 12<p> 13Lorem 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 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. 14</p> 15<input type="text"> 16<h2>Heading 2</h2> 17<p> 18Lorem 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 <a href="#b">mainクラスの子要素ではないリンク</a> 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. 19</p> 20<a href="#a">mainクラスの子要素のリンク</a> 21<h2>Heading 2</h2> 22<p> 23Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="c">mainクラスの子要素ではないリンクです</a> 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. 24</p> 25<p> 26Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. 27</p> 28</div> 29<br> 30<div class="base black">ここは黒</div> 31<div class="base red">ここは赤</div> 32<div class="base green">ここは緑</div> 33</body> 34</html>

CSS

1h1 { 2color: black; 3font-size: 40px; 4} 5p { 6font-size: 9px; 7background-color: yellow; 8} 9.test{ 10background-color: gray; 11} 12#header{ 13font-size: 30px; 14} 15.base{ 16font-size: 20px; 17font-weight: bold; 18} 19.black{ 20 21color: black; 22} 23.red{ 24 25color: red; 26} 27.green{ 28 29color: green; 30} 31:link { 32color: crimson; 33} 34:visited{ 35color:grey; 36}

試したこと

CSSの読み込みはできているか確認しました。

画像添付しておりますので確認していただけると幸いです。
お手数おかけしますがよろしくお願いいたします。

追記:現状報告
皆さま問題なく動作しているのではいかとのことだったので、
・新規で、htmlとCSSそれぞれファイルを作成し直し、フィアル名を変更しCSSの読み込みのための記述をhtml側でしました。
そのファイルにhtmlとcss共にコードを貼り付けしました。→✖️
・コードを確認していたところ、html側では削除していたにもかかわらずCSS側にのみ残っていたコードがあったのでこれが悪さをしているのかと思いCSS側に残っていたコードを削除しました。→✖️
・再度cssがきちんと読み込まれているか確認したところ全てのセレクタの値を変更してみましたが反映されていませんでした..。
・codepenにて現状のコードを貼り付けして保存しました。(共有に関しては指示待ち状態)
codepenに貼り付けを行なった際にはcssは反映されました。
疑問
codepenに貼り付けた際にcssは正常に反映されましたが、やはり:linkに関してはコードの色は白のままですし、
color: crimson;は反映されていませんでした。

お返事遅れていてすみません。

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

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

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

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

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

skys215

2021/11/30 03:19

```css :link{ color: crimson; } /** <--ここ **/ ``` 最後に何か足りません?笑
hatena19

2021/11/30 05:39

画像ではなく、実際のコードをコピーしたものを貼り付けてください。 その場合、マークダウンのコードブロックに入れてください。 ```html ここにHTMLコードを貼り付け ``` ```css ここにCSSコードを貼り付け ```
hatena19

2021/11/30 05:42

例えば、全角空白が紛れ込んでいると、動作しないことがありますが、画像からでは分かりません。
yuura

2021/11/30 06:07

マークダウンとコードブロックについて調べたのですが間違っていたらすみません。 ```html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTMLの練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main"> <h1>Heading 1</h1> <a href="#a">mainクラスの子要素のリンク</a> <p> 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 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. </p> <input type="text"> <h2>Heading 2</h2> <p> 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 <a href="#b">mainクラスの子要素ではないリンク</a> 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. </p> <a href="#a">mainクラスの子要素のリンク</a> <h2>Heading 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="c">mainクラスの子要素ではないリンクです</a> 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. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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. </p> </div> <br> <div class="base black">ここは黒</div> <div class="base red">ここは赤</div> <div class="base green">ここは緑</div> </body> </html> ``` ```CSS h1 { color: black; font-size: 40px; } p { font-size: 9px; background-color: yellow; } .test{ background-color: gray; } #header{ font-size: 30px; } .base{ font-size: 20px; font-weight: bold; } .black{ color: black; } .red{ color: red; } .green{ color: green; } :link { color: crimson; } :visited{ color:grey; } ```
hatena19

2021/11/30 06:50

質問は編集できますので、質問の方にコピーしてください。 コメント欄ではマークダウンは効きませんので。
Lhankor_Mhy

2021/12/02 05:43

ご提示いただいたコードを試してみましたが、問題が再現しませんでした。
yuura

2021/12/02 06:08

そうでしたか... sublimetextでは間違っていなければコードの色が変わるのですが、 .greeny .red .black .baseなどは緑に変わっているのに対して :linkや:visitedは白のままなのでどこか間違っているのかなと思った次第です。
Lhankor_Mhy

2021/12/02 06:10

え、色が変わらないというのは、ブラウザで表示された時の話ではなくて、sublimetext の lint のことなんですか?
yuura

2021/12/02 06:50

lintというのですね。コードの色が変わっていないです。 セレクタは変わらずプロパティは変わっています。 :link, :visited, :hover, :active{ color:crimson; } このコードだと color:crimson以外は白で color:crimsonは青に変わっています。
yuura

2021/12/04 13:10

注意が出ているといいますと、どういう状態なのでしょうか? CSS3で追加されたカラー名にcrimsonがありましたが、chromeでは使えない色ということでしょうか?
guest

回答2

0

ベストアンサー

css

1:link, :visited, :hover, :active{ 2 color:crimson; 3}

恐らくクリックした事あるので、linkとvisitedを同時に書いて見てください。
https://jsfiddle.net/x48n9tk7/

:link や :visitedを打ち込んだ

と書きましたが、同時に打ち込んだとは言ってないので、試してないと判断しました。

投稿2021/11/30 05:43

skys215

総合スコア910

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

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

skys215

2021/11/30 05:44

hover とactiveは書かなくてもいいのですが、書くことをお勧めします。
yuura

2021/12/02 05:23

おっしゃる通りに :link, :visited, :hover, :active{ color:crimson; } と打ってみたのですが、 Heding1の色は黒でにカーソルを持っていくと色がcrimosonに変わるようになりました。 Heding2は色がcrimsonです。 メインクラスの子要素のリンクは色がcrimsonでクリックしても反応なし、 メインクラスの子要素ではないリンクの#bは色がcrimsonで上記同様にクリックでの反応なし メインクラスの子要素ではないリンクの#cは色がcrimsonでクリックするとページが変わります。色はかわりません。 現状報告になってしまいますが、正常に適応されているのでしょうか? aタグにlinkとvisitedを適応させたいのですが。 お返事遅くなっていてすみません。
skys215

2021/12/02 07:25

#b,#cは質問の中に入っていないようですね。 jsfiddleやcodepenにコードをアップさせていただけもらえますか?
yuura

2021/12/04 14:12

codepenに登録してみました。調べたのですが共有の仕方はどのような方法で共有すれば宜しいですか? sns共有や埋め込み?という方法があるのですかね...?
skys215

2021/12/05 01:13

Saveボタンを押した後、URLをここにペーストすればよろしいいです。
yuura

2021/12/05 12:17

訂正してくださったのですね!有難うございます。 codepenでは動作していますね! 因みにcodepenで :link{ color: crimson } の部分の:linkの部分がその上の.red.green.blackのように黄色に色が変わらないのは異常ではないのでしょうか? 色が変わらないセレクタもありますか? あと相変わらず自分のエディタで打ったコードはchromeにてCSSに反映されてないんです... CSSの読み込みができていないということでしょうか? 全てのセレクタが適応されていません。
skys215

2021/12/05 13:21

codepenでは黄色に変わってます。変わってなければ、タイプミスかもしれません。 そうですね、cssが読み込みできてないみたいです。DeveloperToolsで確認してください。
yuura

2021/12/05 14:21

僕の画面では黄色ではなく白ですね... かな文字にして:を押すとlinkが黄色表示にはなりますがCSSが反映されず、英数にして:を押すとlinkが白色表示になりますが、CSSは反映されています。skys215さんの画面では黄色表示になっていてCSSが反映されているんですよね?その状態が正常なのですよね...? DeveloperTool調べてやってみたのですが、問題なければconsoleのところに何も表示されない状態であっていますでしょうか?
skys215

2021/12/05 14:50

:は英数じゃないとダメです。 読み込めてなければ、Developer Toolのnetworkの所に、CSSは赤く表示されて404とかエラーになってるはずです。
yuura

2021/12/05 15:30

ですよね、:linkの色に関しては適用されていればよしということにします。有難うございます! NetWorkのところはエラーは出ていません。が確実に反映はされていなく、consoleのところに Failed to load resource: net::ERR_FILE_NOT_FOUNDのようなエラーが出ました。
skys215

2021/12/05 15:33

ERR_FILE_NOT_FOUNDそのエラーです。 正しいパスに変えれば読み込めます。
yuura

2021/12/05 15:53

同じフォルダ内の同じ階層にindex11.htmlというファイルとstylesheet1.cssというファイルを置いているのですが、その場合<link rel="stylesheet" href="./stylesheet1.css">このようなコードで問題ないでしょうか? このコードに打ち替えたらエラーは消えましたが反映はされませんでした.....
yuura

2021/12/05 15:56

DeveloperToolのNetWorkのところの左端に赤丸はエラーということでしょうか? 画像を質問のところに追加しておきますので確認くだされば幸いです。
yuura

2021/12/05 17:19

解決しました! もともとファイルを保存していた場所から別のフォルダにファイルを移動していたことが原因で、ファイルを保存しても更新されていない状態でした。(もともとのフォルダにはファイルがないのに保存先は変わっていなかった為) 名前をつけて保存をして新しいフォルダに移したら反映されるようになりました。 長い間協力くださって有難うございました!! 大変お世話になりました。
guest

0

cssファイルの:linkの前にクラス名やタグ名をつける必要があるかと思います。
例:

css

1a:link { 2対応させたいcssの内容 3}

ちなみに、あまり使用しないので詳細はご自身で調べていただければと思いますが、:linkはaタグにしか効かないと思います。

投稿2021/11/30 04:08

編集2021/11/30 04:14
j30st

総合スコア28

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

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

int32_t

2021/11/30 04:17 編集

擬似クラスにクラス名やタグ名を付けなくても動きます。
j30st

2021/11/30 04:18

ご指摘ありがとうございます。 それでは正しい回答をお願いいたします。
j30st

2021/11/30 04:24

この場合は、 :linkの閉じカッコがないことが原因でしょうかね。 特定のリンクにのみ:linkを効かせたいのであればクラス名やタグ名は必要ですよね。
yuura

2021/11/30 05:26

皆さま早急にご回答くださり有難うございます。 すみません画像が適切でありませんでした。 }を付けても反映されないのです...
j30st

2021/11/30 09:23

下のskys215さんの方法でも解決しませんか? 解決しないようであれば、画像ではなく実際のコードを質問欄に全て貼り付けてください。
yuura

2021/12/02 05:25

すみません適応できているのか判断できていない状態です。 skys215さんにお返事したのが現状でわかる内容です。 ご確認くだされば幸いです...。
j30st

2021/12/02 06:08

結論から言うと正しく適応しているかと思います。 まず:linkや:visited:hover:activeなど一度全てググってどういった場合に使用するものなのか、その効果はどういったものなのか等調べてみることを勧めします。 かなり簡潔に書きますが、 :linkは未訪問のリンク(aタグ)に対して処理を行うもの(訪問後は通常のリンクになる) :visitedは訪問済みのリンクに対して処理を行うもの(訪問前は通常のリンク) :hoverはカーソルを上に乗せた時に処理を行うもの :activeはリンク等をクリック(等)している間の処理に対して行うもの です。 今はこの全てが適応している状態なので訳がわからないのでしょう。 試しにHTMLファイルの</body>の上とCSSファイルに以下のコードをそれぞれコピペで追加してみてください。 ```html <a href="#1" class="skyblue">クリックしてなければ青</a> <a href="#2" class="green">クリックしていれば緑</a> <a href="#3" class="gray">カーソルを乗せたら灰色</a> <a href="#4" class="orange">クリック中はオレンジ色</a> ``` ```css a.skyblue:link {color:skyblue;} a.green:visited {color:green;} a.gray:hover {color:gray;} a.orange:active {color:orange;} ``` これでご判断いただけるのではないでしょうか。 ちなみに CSSファイルに追加する a.skyblueという書き方は、skyblueというクラスが付いているaタグという意味です。 まだ見たことがないと思いますが、今後出てくる内容かと思うので頭に入れておくと良いかもしれません。
yuura

2021/12/05 12:23

長い文章をご丁寧に有難うございます。 質問のところに追記したのですが、 動作があっているか確認してみたのですが、htmlは正常に反映されていますが、cssは全て反映されていませんでした。 読み込みが正しくできていないのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問