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

Question

メニューが複数あって、最後のメニューの文字（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>

解決策を教えて下さい。

Comments

[hatena19]

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

[B_J]

すみません、お願いします

<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]

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

[B_J]

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

[hatena19]

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

コードはコードブロックに入れてください。

[B_J]

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

[hatena19]

修正ありがとうございました。
私の回答のコードは試してみしたか。

.h-list:last-child a {
color: blue;
}

最後の .h-list 内の a というように指定することになります。

[B_J]

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

[hatena19]

そのものずばりのキーワードはちょっと思いつかないですが、
公式ドキュメントのMDNの解説をじっくりと読んて意味を理解することから始めるといいと思います。

:last-child - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:last-child
「兄弟要素のグループの中で最後の要素を表します。」

[B_J]

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

Answer 1

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

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

<div class="h-menu">
  <div class="h-list">
    <a href="#">Menu1</a>
  </div>
  <div class="h-list">
    <a href="#">Menu2</a>
  </div>
  <div class="h-list">
    <a href="#">Menu3</a>
  </div>
  <div class="h-list">
    <a href="#">Menu4</a>
  </div>
</div>

下記でどうですか。

.h-list:last-child a {
  color: blue;
}

Comments

[B_J]

すみません、お願いします

<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>

Answer 2

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

<div class="h-list">
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>
    <a href="#">test</a>   
</div>

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

Comments

[B_J]

.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]

すみません、お願いします

<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>

[B_J]

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

[gas.engine]

color: #blue; の#は不要です。
</ul></li>の閉じるタグが少ないです。
修正してみてください。