最後の要素にborder-bottomを適用させたい

Question

前提・実現したいこと

最後の要素にborder-bottomを適用させたい

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

最後の要素にだけborder-bottomが適用されるようにコードを書いたのだが、1個目２個目にも適用されてborder-topとbottomがかぶってしまう。

該当のソースコード

<li class="page-footer__block footer-block">
        <h4>Portfolio</h4>
        <?php
            $defaults = array(
                'menu_class'      => 'navbar-nav',
                'container'       => 'false',
                'link_before'     => '<p class="port-folio">',
                'link_after'      => '</p>',
                'theme_location'  => 'footer-navigation'
            );
            wp_nav_menu($defaults);
            ?>
    </li>

.port-folio {
    border-top: 2px dotted $navbar;
    &:last-child{
    border-bottom: 2px dotted $navbar;
}

                
       

<li class="page-footer__block footer-block">
  <h4>Portfolio</h4>
  <ul id="menu-%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="navbar-nav"><li id="menu-item-123" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-123"><a href="https://drive.google.com/drive/folders/1HGxNurar-_Hdc-WBayaXrL9RjAzcQaNI?usp=sharing"><p class="port-folio">ポートフォリオ</p></a></li>
<li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-126"><a href="http://localhost/wordpress.create1/sample1/"><p class="port-folio">sample1</p></a></li>
<li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://localhost/wordpress.create1/sample2/"><p class="port-folio">sample2</p></a></li>
<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://localhost/wordpress.create1/sample3/"><p class="port-folio">sample3</p></a></li>
<li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="http://localhost/wordpress.create1/sample5/"><p class="port-folio">sample5</p></a></li>
<li id="menu-item-128" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-128"><a href="http://localhost/wordpress.create1/sample4/"><p class="port-folio">sample4</p></a></li>

</ul>    </li>

試したこと

last-childで最後の要素にだけborder-bottomが適用されるようにしたがだめだった。

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

ここにより詳細な情報を記載してください。

Comments

[new1ro]

Sass (SCSS?) の記述だけを見ると、問題がないように見えます。

WordPressの処理の結果、出力されるHTMLを貼り付けていただけないでしょうか?

[ral819]

gogleの機能でみたらこんな風になってました。

[new1ro]

ありがとうございます。回答に追加しておきました。

.port-folioは、内側にある要素なので、
li.menu-itemに対して「:last-child」を指定する必要がありそうです。

Answer 1

以下のようにするとよさそうです。

.port-folio {
    border-top: 2px dotted $navbar;
}
li.menu-item:last-child .port-folio {
  border-bottom: 2px dotted $navbar;
}

Comments

[ral819]

回答ありがとうございました！
無事解決できました！

[new1ro]

よかったです！

Answer 2

:last-childは親要素の中の最後の要素を示すので今の書き方では全てのpタグが当てはまってしまいます。以下のように書きましょう。

.port-folio {
    border-top: 2px dotted $navbar;
}
li:last-child .port-folio{
    border-bottom: 2px dotted $navbar;
}

Comments

[ral819]

回答ありがとうございました！