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

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

新規登録して質問してみよう
ただいま回答率
86.02%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

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

aswedrftgyh
aswedrftgyh

総合スコア2

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0グッド

0クリップ

154閲覧

投稿2023/02/02 12:45

実現したいこと

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

3

ベストアンサー

<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

総合スコア2307

yambejp, aswedrftgyh👍を押しています
aswedrftgyh🎉を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

aswedrftgyh

2023/02/02 13:12

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

1

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>

投稿2023/02/02 13:01

yambejp

総合スコア109848

aswedrftgyh👏を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

aswedrftgyh

2023/02/02 13:12

ありがとうございます!!

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。