HTML_CSS
Googleでログイン
問題41：疑似クラスnth-childを使ってみよう
4番目以降の要素のcolorを赤色にしてみましょう!
また、箇条書きリストの先頭にある黒点も消しておきましょう。
見本画像を参考にしてCSSに記述し実装してください。
また、箇条書きリストの先頭にある黒点も消しておきましょう。
見本画像を参考にして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¥
補足
今回のようなスタイルの指定方法は、リストを作った際のmarginをいれる際に非常に役立ちます。
縦並びであれば:nth-child(n+2)として、2番目以降の要素にmargin-top: 10px;
横並びであれば:nth-child(n+2)として、2番目以降の要素にmargin-left: 10px;
このようにすることで、1番目の要素に余分な空白がうまれません。
リストにborderを付ける際も同じことが言えます。
割と頻繁にしようするので必ず覚えておきましょう!
縦並びであれば:nth-child(n+2)として、2番目以降の要素にmargin-top: 10px;
横並びであれば:nth-child(n+2)として、2番目以降の要素にmargin-left: 10px;
このようにすることで、1番目の要素に余分な空白がうまれません。
リストにborderを付ける際も同じことが言えます。
割と頻繁にしようするので必ず覚えておきましょう!
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
:nth-child(n+4)の様に記述します。
逆に4番目までを指定する場合は
:nth-child(-n+4)の様に記述します。