複数のオブジェクトを横並びで均等に配置しつつ、一部のオブジェクトのみ間隔を

掲載画像の様にオブジェクトを配置したいです。
現状は両端の20pxは親要素にpadding、青いオブジェクトにはmargin-right:60pxを設定しつnth-of-typeを使って4つ目の青いオブジェクトのみmarginの値を変えているのですが他に方法は無いでしょうか？
出来ればnth-of-typeを使わずに収めたいです。
よろしくお願いします。

HTML

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0">
6    <title>金曜日(仮)</title>
7    <link rel="stylesheet" href="stylesheet.compact.css">
8    <link href="https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap" rel="stylesheet">
9    <link rel="icon" href="img/favicon.ico">
10    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
12     <script type="text/javascript" src="js/script.js"></script>
13    <script src="https://kit.fontawesome.com/646ee2a69d.js" crossorigin="anonymous"></script>
14
15  </head>
16
17
18  <body>
19
20
21<div class="page">
22  <div class="container">
23    <div class="top-btn">
24      <div class="Genre">
25      <a class="Genre-btn" href=""></a>
26      <a class="Genre-btn" href=""></a>
27      <a class="Genre-btn" href=""></a>
28      <a class="Genre-btn" href=""></a>
29      </div>
30      <div class="rank">
31        <a class="rank-btn" href=""></a>
32      </div>
33    </div>
34
35  </div>
36</div>
37
38
39
40  </body>
41    </html>

CSS

CSS
1.page { background-color: #e0f5f7; }
2
3.container { background-color: white; padding-top: 10px; max-width: 1170px; }
4
5.top-btn { display: flex; }
6
7.Genre { display: flex; align-items: center; justify-content: center; }
8
9.Genre-btn { color: white; font-size: 18px; font-weight: 600; text-decoration: none; background-color: #7e9fe2; width: 163px; height: 50px; border-radius: 20px; text-align: center; margin-right: 60px; }
10
11.Genre-btn:nth-of-type(4) { margin-right: 30px; }
12
13.rank { display: flex; align-items: center; justify-content: center; margin: 0 0 0 auto; }
14
15.rank-btn { color: white; font-size: 18px; font-weight: 600; text-decoration: none; background-color: #7c7c7c; width: 260px; height: 50px; border-radius: 20px; text-align: center; }
16

yambejp

2020/08/27 04:58 編集

HTMLを例示くださいそもそもn番目の要素が他と違うのを、出現順以外のなにで判断するのでしょうか？

hatena19

2020/08/27 05:16

あと、現状のCSSも提示してくたさい。

kawakamikami1

2020/08/27 06:04

>yamabejp 見てくださりありがとうございます。 HTMLを記載致しました。自分は知識が浅く、出現順以外に判断する方法があるのかどうか分からなかったため”他に方法は無いか”という質問をさせて頂きました。 >hatena19 見てくださりありがとうございます。 CSSを記載致しました。

Lhankor_Mhy

2020/08/27 07:19 編集

marginの値を変える要素の条件は何ですか？ 4つ目に固定ですか？つまり、「4つ目の青いオブジェクトのみmarginの値を変え」たくなった理由は何ですか？　ということをお聞きしています。

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

回答1件

ベストアンサー

補足依頼にご回答いただけませんでしたので、「nth-of-typeを使わずに提示のコードと同じ表示にする」と読んで、ご回答します。

:nth-childを使う。

css
1.Genre-btn:nth-child(4) { margin-right: 30px; }

:last-childを使う。

css
1.Genre-btn:last-child { margin-right: 30px; }

column-gapを使う。

css
1.Genre { display: flex; align-items: center; justify-content: center; column-gap: 60px; margin-right: 30px;}
2
3.Genre-btn { color: white; font-size: 18px; font-weight: 600; text-decoration: none; background-color: #7e9fe2; width: 163px; height: 50px; border-radius: 20px; text-align: center; /*margin-right: 60px;*/ }
4
5.Genre-btn:nth-of-type(4) { /*margin-right: 30px;*/ }

マージン相殺する。

css
1.Genre-btn:nth-child(4) { /* margin-right: 30px; */ }
2
3.rank { display: flex; align-items: center; justify-content: center; margin: 0 0 0 -30px; }