last child を最後のメニューのリンクに設定したいが出来ない

メニューが複数あって、最後のメニューの文字（aタグでリンク設定済み）の色だけ変えたいために、下記のように設定してるんですが、青くなりません。last-childとやっているのに、それ以外のリンクを設定している部分も青色になってしまいます。

.h-menu{
    display: flex;
    align-items: center;
}


.h-list{
    display: inline-block;
    position: relative;
}

.h-list a{
    color: black;
    display: block;   
}

.h-list:last-child { 
  background: yellow;
  color:#white;
}

ul {
    list-style: none;
  }

    <nav class="h-nav">
        <ul class="h-menu">
            <li class="h-list">
                <a href="#">A</a>
            <ul class="sub-menu">

            <li class="sub-menu-item a">
                <a href="#">A-1</a>
              </li>
              <li class="sub-menu-item a">
                <a href="#">A-2</a>
              </li>
              
            </ul>
            </li>
        
            <li class="h-list">
                B
            </li>

            <li class="h-list">
                <a href="#">C</a>
            </li>

            <li class="h-list">
                D
            </li>

            <li class="h-list">
                E
            </li>

            <li class="h-list">
                <a href="#">F</a>
            </li>

            <li class="h-list">
                <a href="#">G</a>
            </li>

        </ul>
    </nav>

解決策を教えて下さい。

hatena19

2021/06/12 00:05

HTMLコードも提示してもらわないと、的確な回答は難しいです。

B_J

2021/06/12 00:33

すみません、お願いします <nav class="h-nav"> <ul class="h-menu"> <li class="h-list"> <a href="#">A</a> <ul class="sub-menu"> <li class="sub-menu-item a"> <a href="#">A-1</a> </li> <li class="h-list"> <a href="#">B</a> </li> <li class="h-list"> <a href="#">C</a> </li> </ul> </nav>

hatena19

2021/06/12 01:05 編集

質問は編集できますので、質問に追記してください。ここは普段は閉じているので目につきにくいです。あとCSSも一部ではなくメニュー全体のものを提示してください。

B_J

2021/06/12 01:09

なぜか変わりません・・・黒字のママです・・・

hatena19

2021/06/12 01:23

HTMLのULの開始タグと終了タグの数があってません。ただしいものに修正してください。メニュー全体のCSSを追記してください。コードはコードブロックに入れてください。

B_J

2021/06/12 07:02

修正しました。よろしくお願い致します。

hatena19

2021/06/12 07:18

修正ありがとうございました。私の回答のコードは試してみしたか。 .h-list:last-child a { color: blue; } 最後の .h-list 内の a というように指定することになります。

B_J

2021/06/12 07:19

できました。本当にありがとうございました。調べても方法があるページが見当たりませんでした。よろしければ、検索の仕方、キーワードなど後学のために教えて下さいませんでしょうか？

hatena19

2021/06/12 07:42

そのものずばりのキーワードはちょっと思いつかないですが、公式ドキュメントのMDNの解説をじっくりと読んて意味を理解することから始めるといいと思います。 :last-child - CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/:last-child 「兄弟要素のグループの中で最後の要素を表します。」

B_J

2021/06/12 07:50

分かりました。ご親切に本当にありがとうございました。また何かありましたら宜しくお願い致します。

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

回答2件

ベストアンサー

修正依頼コメントにも書きましたが、HTMLコードを質問に追記してください。

とりあえず、下記のようなHTMLだと推測して、

html
1<div class="h-menu">
2  <div class="h-list">
3    <a href="#">Menu1</a>
4  </div>
5  <div class="h-list">
6    <a href="#">Menu2</a>
7  </div>
8  <div class="h-list">
9    <a href="#">Menu3</a>
10  </div>
11  <div class="h-list">
12    <a href="#">Menu4</a>
13  </div>
14</div>

下記でどうですか。

css
1.h-list:last-child a {
2  color: blue;
3}

投稿2021/06/12 00:20

編集2021/06/12 00:54

hatena19

総合スコア34075

B_J

2021/06/12 00:33

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

以下で最後だけ青く表示されましたがどうでしょうか？

html
1<div class="h-list">
2    <a href="#">test</a>
3    <a href="#">test</a>
4    <a href="#">test</a>
5    <a href="#">test</a>
6    <a href="#">test</a>   
7</div>
8

css
1a{
2    color: black;
3    display: block;
4}
5.h-list a:last-child{
6    color: blue;
7}

投稿2021/06/11 22:53

gas.engine

総合スコア608

B_J

2021/06/11 23:35

.h-menu{ display: flex; align-items: center; } .h-list{ display: inline-block; position: relative; } .h-list a{ color: white; display: block; } .h-list:last-child ｛ color: #blue; }

B_J

2021/06/12 00:34

B_J

2021/06/12 01:09

なぜか、変わりません・・・