cssのa:hoverが効かなかった原因が判明

更新日：2018年5月24日

結論から言うとcssファイル内で、「セレクタ」をまとめて書いている場合、擬似クラスが効かないようです。

コンテンツ

サンプル例

このサイトのデフォルトの、リンクhoverカラーは赤です。
下記のように、リンクhoverカラーをクリーム色に指定。
セレクタ + a:hover をまとめて書くと、クリーム色が適応されません。

■ CSS
【まとめて書いた場合】

.link_set1 a:hover, .link_set2 a:hover, .link_set3 a:hover {
	color:#ffe4b5;
}

【分けて書いた場合書いた場合】

.link_separate1 a:hover{
	color:#ffe4b5;
}
.link_separate2 a:hover{
	color:#ffe4b5;
}
.link_separate3 a:hover {
	color:#ffe4b5;
}

■ HTML
【まとめて書いた場合】
セレクタをまとめて書いた場合
 セレクタをまとめて書いた場合
 セレクタをまとめて書いた場合

このページをリライトしているときに、セレクタをまとめて書いてhoverを効かせる方法がわかりました！
たまたま、意図しない書き方で更新したらhoverが効いてましたw

■ CSS
【まとめて書いた場合ニューバージョン】

.link_change1:hover, .link_change2:hover, .link_change3:hover {
	color:#ffe4b5;
}

■ HTML
【まとめて書いた場合ニューバージョン】
セレクタをまとめて書いた場合
 セレクタをまとめて書いた場合
 セレクタをまとめて書いた場合

違いはセレクタの後ろにaが入るか入らないかです。

.link_set1 a:hover, .link_set2 a:hover, .link_set3 a:hover
.link_change1:hover, .link_change2:hover, .link_change3:hover

最初は単純な記述間違いかと思いましたが、
まとめてあるクラスをバラバラにしてみたらうまく効くようになりました。

~~クラスをまとめて書いている場合はなぜか擬似クラスが効かないようです。~~

~~この場合はめんどくさいですが、切り分けてセレクタを書きましょう。~~

※2018/03/01追記
上記の方法でセレクタをまとめて書いてもhoverが効くことが確認できました。

また、CSSが苦手な人向けにCSSの勉強法についてまとめてみました。
CSS勉強法についてお困りの方は下記よりどうぞ。

真っ白のページから一から作れといわれても全く意味が分かっておらず作れない。なにがわからないかわからないCSSを勉強するにあたってどんな勉強法がいいのか？ブログサイトを制作する上で、デザイン的な部分をカスタムするにはCSSの知識は必要不可欠ですが、いざ初...

確認したブラウザはfirefoxです。他のブラウザは確認していないです。わかり次第、他の記事で報告します。

久しぶりにcssをゴリゴリにいじると疲れますね…
トホホ、こんな事のせいでWordpressのカスタマイズが、全然進まなかったです。