ページネーションの間隔がページによって変わってしまう

paginate_linksでページネーションを設置し、最後の.page-numbers以外にmargin-right: 20px;を指定しました。
ページの３番目以降になると.currentのmargin-rightが効かず、間隔が変わってしまいます。
ページが変わってもページネーションの間隔を揃えたいです。
そもそも.pagination内の<a>も<span>もクラス名は.page-numbersなのに<span>のみmargin-rightが効かなかったので.dotsは個別にmargin-rightを当てることで解決しました。
.currentに関しては最後のページになった場合、margin-rightがあると中央寄せのバランスが崩れてしまうので避けたいです。

php
1          <?php if(paginate_links()): ?>
2          <div class="pagination">
3          <?php
4          echo
5          paginate_links(
6          array(
7          'end_size' => 1,
8          'mid_size' => 2,
9          'prev_next' => false,
10          'prev_text' => false,
11          'next_text' => false,
12          )
13          );
14          ?>
15          </div><!-- /pagination -->
16          <?php endif; ?>

scss
1.pagination {
2  margin-top: 105px;
3  text-align: center;
4    .page-numbers {
5      display: inline-block;
6      font-weight: bold;
7      padding: 17px 20px;
8      border: 1px solid #1B224C;
9      &:not(:last-of-type) {
10        margin-right: 20px;
11      }
12    }
13    .current {
14    background-color: #1B224C;
15    color: #fff;
16    display: inline-block;
17    }
18    .dots {
19      border: none;
20      margin-right: 20px;
21    }
22}

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

回答1件

ベストアンサー

last-of-typeは複数の種類のタグ(今回はaとspan)が同階層に混在している場合、意図通りに動かすのが難しいです。
nth-of-typeの罠 | Kinchan's Blog

セレクタを.page-numbers + .page-numbersと兄弟要素で指定して連続する要素にはmargin-left: 20pxという指定が良いかと思います。

scss
1.pagination {
2  margin-top: 105px;
3  text-align: center;
4    .page-numbers {
5      display: inline-block;
6      font-weight: bold;
7      padding: 17px 20px;
8      border: 1px solid #1B224C;
9      // &:not(:last-of-type) { 削除
10      //   margin-right: 20px; 削除
11      // } 削除
12     + .page-numbers { //追加
13         margin-left: 20px; //追加
14     } //追加
15    }
16    .current {
17    background-color: #1B224C;
18    color: #fff;
19    display: inline-block;
20    }
21    .dots {
22      border: none;
23      margin-right: 20px;
24    }
25}