HTML SCSS ページネーション ボタンの間隔が均等に並ばない

Question

HTML SCSSでレイアウトを組んだ ページネーション、ボタンの間隔が均等に並ばない

<div class="info-list-pagination">
     <span class="info-list-pagination__btn info-list-pagination__current">{{ $page }}</span>
     <a href="{{ $url }}" class="info-list-pagination__btn info-list-pagination__link" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">{{ $page }}</a>
</div>

.info-list-pagination {
    text-align: center;
    width: 100%;

    &__btn{
        margin-right: 20px;
    }

    &__btn:last-of-type{
        margin-right: 0;
    }

    &__current {
        background: #0079ea;
        color: #ffffff;
        display: inline-block;
        height: 30px;
        line-height: 1;
        padding: 6px 0;
        text-align: center;
        width: 30px;
        @include f(16, 'NotoSansJP-Medium', 25);
    }

    &__link {
        background: transparent;
        border: 1px solid #0079ea;
        color: #0079ea;
        display: inline-block;
        padding: 6px 0;
        text-align: center;
        width: 30px;
        @include f(16, 'NotoSansJP-Medium', 25);
    }

    &__link:hover {
        background: #0079ea;
        color: #ffffff;
    }
}

currentページの<span>タグ、他のページネーションボタンの<a>タグそれぞれにclass="info-list-pagination__btn"を持たせて、margin-right:20px　を指定。
class="info-list-pagination__btn" last-of-typeにmargin-right:0を指定。

しかし、ブラウザーに表示すると、<span>タグにclass="pagination__btn:last-of-type" が当たっており、margin-right:0となってしまいます。。。。

<span> タグ、<a>タグにclass="info-list-pagination__btn"を与えているのになぜ<span>タグにclass="pagination__btn:last-of-type" となってしまうのでしょうか?

Comments

[hatena19]

HTMLはコンパイルして出力されたものを提示してください。
SCSSも可能なら、コンパイルしてCSSにしたものを提示した方が回答がつきやすいでしょう。
現状のSCSSは @include の定義部分がないのでコンパイルできません。
回答者が状況を再現できるものを提示しないと回答はつきにくいです。

Answer 1

実際に確認はできないので、推測ですが、
下記でどうでしょう。

.info-list-pagination {
    text-align: center;
    width: 100%;

    &__btn{
        margin-right: 20px;
    }

    &__btn:last-child{ //ここを last-of-type から修正
        margin-right: 0;
    }

//以下略

:first-childと:first-of-type、:last-childと:last-of-typeの違い

Comments

[Fukusuke0604]

無事に意図したレイアウトを作ることができました!!

最後の子要素に当てたいから　last:child だったんですね。
添えていただいたリンク先の記事にもあるように曖昧に覚えていて last-of-type()一択の考えになっていました!!

ありがとうございました!!