first-childかlast-childしか効かない

実現したいこと

first-childかlast-childしか効かない
それぞれの::afterを反映させたい

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

現在last-childしか効いていない
なぜか上記を無効化するとfirstのみ反映

該当のソースコード

HTML
1  <ul>
2  <li><a href="#concept">concept</a></li>
3  <li><a href="#stay">room</a></li>
4  <li><a href="#facility">facility</a></li>
5  <li><a href="#meal">meal</a></li>
6  <li><a href="#news">news</a></li>
7  <li><a href="#access">access</a></li>
8   <li><a href="#booking">resevation</a></li>
9  </ul>

CSS
1#g-nav li a:first-child::after{
2content:"コンセプト";
3      color: #FFF;
4font-size: 10px;
5  text-decoration: none;
6  letter-spacing: 0.7em;
7
8}
9
10#g-nav li a:nth-child(2)::after{
11content:"客室";
12color: #FFF;
13font-size: 10px;
14  text-decoration: none;
15  letter-spacing: 0.7em;
16
17}
18
19#g-nav li a:nth-child(3)::after{
20content:"設備";
21color: #FFF;
22font-size: 10px;
23  text-decoration: none;
24  letter-spacing: 0.7em;
25
26}
27
28#g-nav li a:nth-child(4)::after{
29content:"食事";
30color: #FFF;
31font-size: 10px;
32  text-decoration: none;
33  letter-spacing: 0.7em;
34
35}
36
37#g-nav li a:nth-child(5)::after{
38content:"お知らせ";
39color: #FFF;
40font-size: 10px;
41  text-decoration: none;
42  letter-spacing: 0.7em;
43
44}
45#g-nav li a:nth-child(6)::after{
46content:"アクセス";
47color: #FFF;
48font-size: 10px;
49  text-decoration: none;
50  letter-spacing: 0.7em;
51 
52}
53
54#g-nav li a:last-child::after{
55content:"予約";
56color: #FFF;
57font-size: 10px;
58  text-decoration: none;
59  letter-spacing: 0.7em;
60  font-weight: bold;
61}

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

回答2件

ベストアンサー

<li></li>の中には<a></a>が1つしかありません。
ですので一番目の要素または最後の要素しか存在しておりません。
全てセレクタの書き方を変えれば聞くと思います。

例）

diff
1- #g-nav li a:first-child::after {
2+ #g-nav li:first-child a::after {

投稿2023/02/02 12:56

Cocode

総合スコア2314

aswedrftgyh

2023/02/02 13:12

解説付きで理解が深まったためベストアンサーにさせていただきます。ありがとうございました！

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

CSS
1<style>
2#g-nav{
3list-style:none;
4}
5#g-nav li:first-child a::after{
6content:" コンセプト";
7}
8#g-nav li:nth-child(2) a::after{
9content:" 客室";
10}
11#g-nav li:nth-child(3) a::after{
12content:" 設備";
13}
14#g-nav li:nth-child(4) a::after{
15content:" 食事";
16}
17#g-nav li:nth-child(5) a::after{
18content:" お知らせ";
19}
20#g-nav li:nth-child(6) a::after{
21content:" アクセス";
22}
23
24#g-nav li:last-child a::after{
25content:" 予約";
26}
27</style>
28
29<ul id="g-nav">
30  <li><a href="#concept">concept</a></li>
31  <li><a href="#stay">room</a></li>
32  <li><a href="#facility">facility</a></li>
33  <li><a href="#meal">meal</a></li>
34  <li><a href="#news">news</a></li>
35  <li><a href="#access">access</a></li>
36   <li><a href="#booking">resevation</a></li>
37  </ul>