menuの最初の項目だけ色付けしたいです。CSSがうまく反映されません。

前提・実現したいこと

HTML/CSSを使ってwebページの作成をしています。
menu部分の作成中、最初の項目（HOME部分）だけ色を変えたいのですが、CSSが反映されません。

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

CSSで個別のclassに対する文字色設定が反映されず、全体の文字色設定が適応されます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>HTML/CSS first practice from easy tutorials</title>
6    <link rel="stylesheet" href="style practice1.css">
7    <link rel="preconnect" href="https://fonts.gstatic.com">
8    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
9  </head>
10  <body>
11    <div class="container">
12      <div class="menu">
13        <ul>
14          <li class="logo"><img src="easy tutorials/gold leaf material_5457489.png" alt=""></li>
15          <li class="active">Home</li>
16          <li>Services</li>
17          <li>Products</li>
18          <li>Contacts</li>
19        </ul>
20
21      </div>
22
23    </div>
24
25  </body>
26</html>
27

CSS
1*{
2  margin: 0;
3  padding: 0;
4  font-family: 'Open Sans', sans-serif;
5}
6.container{
7  width: 100%;
8  height: 100%;
9  background: #FFFFFF;
10}
11.menu ul{
12  display: inline-flex;
13  margin: 50px;
14}
15
16.menu ul li{
17  list-style: none;
18  margin: 0 20px;
19  color: #A9A9A9;
20  cursor: pointer;
21}
22.logo img{
23  width: 50px;
24  margin-top: -15px;
25  margin-right: 40px;
26}
27.active{
28  color: blue;
29}
30

試したこと

.menu ul li{
部分のcolor設定を消すと反映されましたが、この部分を残したまま最初の項目（HOME部分）だけ色付けしたいです。

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

回答1件

ベストアンサー

詳細度の問題ですね。

例えば下記のように詳細度を上げれば反映されます。

css
1.menu ul li.active{
2  color: blue;
3}

投稿2021/02/13 02:06

hatena19

総合スコア34075

maru0418

2021/02/13 04:01

無事変更することができました。わかりやすくご説明いただくありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

menuの最初の項目だけ色付けしたいです。CSSがうまく反映されません。

前提・実現したいこと

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

該当のソースコード

試したこと

関連した質問