フッター内のリンクボタンのスタイルがあたらないです。

前提・実現したいこと

site name下のmailを背景色を白に、文字色を#7E7E7Eに
更に:hoverすることで白色の実線で囲って背景色を#7E7E7Eに、文字色を白色にしたいです。

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

maillの背景色と文字色が反映されない。

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>test</title>
6</head>
7<body>
8<fooder class="fooder">
9  <div class="footer-content-wrapper">
10    <p>Site name</p>
11    <div class="fooder-maill"><a href="mailto:sample&#64;xxxx.com">mail</a></div>
12    <nav class="site-map">
13      <ul class="site-map__main-links">
14        <li><a href="index.html">NAV</a></li>
15        <li><a href="">NAV</a></li>
16        <li><a href="">NAV</a></li>
17      </ul>
18      <ul class="site-map__sab-links">
19        <li><a href="">NAV1</a></li>
20        <li><a href="">NAV1</a></li>
21        <li><a href="">NAV1</a></li>
22      </ul>
23    </nav>
24    <small class="footer__copyright">Copyright © 2021 All Rights Reserved.</small> </div>
25</fooder>
26</body>
27</html>

CSS
1.footer-content-wrapper {
2  height: 350px;
3  padding: 30px 0;
4  background-color: #7E7E7E;
5  color: #fff;
6  position: relative;
7}
8.footer-content-wrapper p {
9  font-size: 36px;
10  letter-spacing: 2px;
11  margin-bottom: 20px;
12}
13.fooder-maill a {
14  font-size: 20px;
15  color: #7E7E7E;
16  background-color: #fff; 
17  padding: 4px 50px;
18  transform: 0.3s;
19}
20.fooder-maill a:hover {
21  color: #fff;
22  background-color: #7E7E7E;
23  outline: 1px  solid #fff;
24}
25.footer-content-wrapper a {
26  color: #fff;
27  text-decoration: none;
28}
29.footer-content-wrapper a:hover {
30  background-color: #fff;
31  color: #7E7E7E;
32}
33.site-map {
34  margin: 20px 0;
35}
36.site-map, .footer-content-wrapper p, .fooder-maill {
37  display: flex;
38  text-align: left;
39  justify-content: left;
40  padding: 0 30px;
41}
42.site-map__works-links {
43  margin: 25px 0 0 50px;
44}
45.footer__copyright {
46  position: absolute;
47  font-size: 1.1rem;
48  bottom: 30px;
49  left: 0;
50  width: 100%;
51  text-align: center;
52}

試したこと

.fooder-maill をclass指定ではなくid指定にしたが、.footer-content-wrapper のスタイルがあたらなくなりましたので、id指定はやめました。

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

AdobeのDreamWeber v21.1を使用しています。

行動規範の内容に同意します

回答2件

ベストアンサー

'.fooder-maill a' で指定しているcolor:color: #7E7E7E;と、'.footer-content-wrapper a' で指定している color: #fff; が競合しており、css内では '.footer-content-wrapper a' の方が後から書かれているので、そちらが適用されています。

cssは、（1）id・class・タグ・要素などの指定が細かければ細かいほど優先して適用されます。（2）1の細かさが同等であれば、後から書かれた方が優先して適用されます。
詳しくは、「css 点数計算」などで調べてみてください。

詳細度 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

今回の場合、'.fooder-maill a' → '.footer-content-wrapper .fooder-maill a' にすれば効くと思います。

また、<fooder>というタグは無いので、<footer>に直しておいた方がよいかと。

投稿2021/09/30 02:53

mai1210

総合スコア272

jam27

2021/09/30 03:22

ご丁寧にありがとうございます。 '.fooder-maill a' のあとに '.footer-content-wrapper .fooder-maill a'を記述したところ反映されました。フッターのスペルミスのご指摘もありがとうございます。

mai1210

2021/09/30 03:26

あとに追加で記載するのではなく、'.fooder-maill a' を '.footer-content-wrapper .fooder-maill a' に書き換えた方が良いです。（どちらも同じaタグを指す記述なので。後者の方が詳細度が高いので効いている、というだけです。） chromeのデベロッパーツールなど、ブラウザの検証ツールをうまく使うと、cssのどの記述が適用されているのかわかりやすいですよ。

jam27

2021/10/03 08:13

教えていただき、ありがとうございます。

行動規範の内容に同意します