More than 5 years have passed since last update.

何番目・奇数・偶数・N倍の要素にスタイルを適用する方法

Posted at 2017-02-02

内容

下記のようなリストの一部にcssを当てたい場合の書き方。

sample

<ul>
	<li>項目1</li>
	<li>項目2</li>
	<li>項目3</li>
	<li>項目4</li>
	<li>項目5</li>
</ul>

最初の要素にスタイルを適用

li:first-child{
}

最後の要素にスタイルを適用

li:last-child{
}

奇数番目の要素にスタイルを適用

li:nth-child(odd){
}

偶数番目の要素にスタイルを適用

li:nth-child(even){
}

n倍の要素にスタイルを適用　※以下は2の倍数

li:nth-child(2n) {
}

上からn番目の要素にスタイルを適用　※以下は3番目

li:nth-child(3){
}

下からn番目の要素にスタイルを適用　※以下は4番目

li:nth-last-child(4){
}