問題

41
HTML_CSS

疑似クラスnth-childを使ってみよう

今回は奇数や偶数でもなく、N番目以降といった部分のスタイルを変更する問題です。 N番目以降というような操作を行なうにはCSSの疑似クラスであるnth-childを使用します。 問題にチャレンジして、まずは使ってみましょう。

HTML_CSSの問題に挑戦しよう!

問題

疑似クラスnth-childを使ってみよう

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

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

あらかじめエディタに書くコード

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

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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を付ける際も同じことが言えます。
割と頻繁にしようするので必ず覚えておきましょう!

さらにスキルアップしたい方は公式LINEから「HTML_CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET