ログイン

問題41 N番目以降にスタイルを適用させよう

HTML_CSSの問題

HTML_CSS

今回は奇数や偶数でもなく、N番目以降の文字色を変える問題です。 N番目以降が操作できれば、N番目以下も操作できるようになるので、より柔軟な指ができるようになります。是非チャレンジしていきましょう!

N番目以降にスタイルを適用させよう

問題

4番目以降の要素のcolorを赤色にしてみましょう!
また、箇条書きリストの先頭にある黒点も消しておきましょう。

見本画像を参考にしてCSSに記述し実装してください。

自分の環境に書くコード

              <ul>
    <li>1番目の要素です</li>
    <li>2番目の要素です</li>
    <li>3番目の要素です</li>
    <li>4番目の要素です</li>
    <li>5番目の要素です</li>
    <li>6番目の要素です</li>
</ul>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              <ul>
  <li>1番目の要素です</li>
  <li>2番目の要素です</li>
  <li>3番目の要素です</li>
  <li>4番目の要素です</li>
  <li>5番目の要素です</li>
  <li>6番目の要素です</li>
</ul>
¥HTML¥
            
              ul li {
  list-style: none;
}
ul li:nth-child(n+4) {
    color: red;
}
¥CSS¥
            
答えのアイコン

解説

4番目以降にスタイルを付与したい場合は
:nth-child(n+4)の様に記述します。

逆に4番目までを指定する場合は
:nth-child(-n+4)の様に記述します。
ログインして解答を見る
今回のようなスタイルの指定方法は、リストを作った際のmarginをいれる際に非常に役立ちます。

縦並びであれば:nth-child(n+2)として、2番目以降の要素にmargin-top: 10px;
横並びであれば:nth-child(n+2)として、2番目以降の要素にmargin-left: 10px;
このようにすることで、1番目の要素に余分な空白がうまれません。

リストにborderを付ける際も同じことが言えます。
割と頻繁にしようするので必ず覚えておきましょう!
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!