listの右側だけに空白を入れたい

前提・実現したいこと

ホームページ作成の学習をしているのですが、３つあるlistの右側の部分だけ空白を入れたいのですが、一番簡単な書き方がいまいち分かりません。

該当のソースコード

HTML
1ソースコード
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="utf-8">
6  <title>XD</title>
7  <link rel="stylesheet" href="css/styles.css">
8</head>
9
10<body>
11  <header>
12    <div class="header">
13        <div class="header-logo">
14          <h1>LOGO</h1>
15        </div>
16        <nav>
17          <ul>
18            <li><a href="">Home</a></li>
19            <li><a href="">About</a></li>
20            <li class="aaa"><a href="">Contact</a></li>
21          </ul>
22        </nav>
23      </div>
24  </header>
25</body>
26</html>

CSS
1body {
2  margin: 0;
3  padding: 0;
4}
5
6.header {
7  background: #EFA358;
8  display: flex;
9  justify-content: space-between;
10  width: 1366px;
11  height: 80px;
12}
13
14.header-logo {
15  padding-left: 183px;
16  color: #FFFFFF;
17  /* font-size: 28px; */
18}
19
20.aaa {
21  padding-right: 183px;
22}
23
24nav ul {
25  list-style: none;
26  margin: 0;
27  padding: 0;
28  display: flex;
29}
30
31/* nav li {
32  padding-right: 183px;
33} */
34
35nav a {
36  color: #FFFFFF;
37  font-size: 20px;
38  width: 100px;
39  text-align: center;
40  line-height: 80px;
41  display: block;
42  text-decoration: none;
43}
44
45  /* nav a:hover {
46    background: #eee;
47  } */

試したこと

cssでliをpadding指定したが全体が反映されてしまうので、３つめのliに対してclass指定したら出来るが、これが一番簡単な書き方なのかどうか。

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

windows10、VScode

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

回答1件

ベストアンサー

最後のliにだけ当てたい場合は次のような記述でスタイルを当てられます。
HTML側でクラスを指定する必要もありません。

nav li:last-child {
  padding-right: 183px;
}

これが自分が知る中で一番かんたんな記述だと思います。

投稿2021/07/31 12:00

mottox2

総合スコア299

退会済みユーザー

2021/07/31 12:07

last-childというのがあるんですね！勉強になりました、ありがとうございました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！