liでリストを作ったとします。2番目だけに装飾を加えたいとか2番目以外の全てに何かをしたい場合に使える便利なコードです。上手に説明が出来ないので、サンプルを見て下さい。
INDEX
使用する擬似クラスについて
一般的には、「:first-child」や「:nth-child」を使用する様ですが、囲んでいる要素によっては順番の数え方が異なる事から、効かない場合があります。XXX-of-type「first-of-type」とかを使用した方が良いそうです。
共通 html
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>.test > liって書いてしまっていますが、.test liでもOKです。
liでなくても、pでも何でも連なっていれば使えます。
2番目だけ指定
.test > li:nth-of-type(2) {
background: #009e96;
}最後だけ指定
.test > li:last-of-type {
background: #009e96;
}最初だけにしたい場合は、li:first-of-typeを使います。
最初と最後だけ指定
最初だけと最後だけの2つを指定しなければなりません。
.test > li:last-of-type,.test > li:first-of-type{
background: #009e96;
}最初以外を指定
+2=2/1+2=3/2+2=4/3+2=5 の式
.test > li:nth-of-type(n+2) {
background: #009e96;
}最初じゃない。と書く場合
.test > li:not(:first-of-type) {
background: #009e96;
}偶数だけ指定
even=英語で偶数。若しくは(2n)も可
.test > li:nth-of-type(even) {
background: #009e96;
}奇数だけ指定
odd=英語で奇数。若しくは(2n+1)も可
.test > li:nth-of-type(odd) {
background: #009e96;
}最後から or 最初から〇番目以降を指定
最後から4番目以降（最後の4つ）を指定
.test > li:nth-last-of-type(-n+4){
background: #009e96;
}最初から2番目以降を指定
.test > li:nth-of-type(n+2){
background: #009e96;
}最後から〇番目より前を指定
.test > li:nth-last-of-type(n+3){
background: #009e96;
}最初から〇番、最後から〇番を指定
.test > li:nth-of-type(n+2):nth-last-of-type(n+3) {
background: #009e96;
}擬似クラスいろいろ
訳が分からなくなってしまいそうですが、コレを使えばコンパクトなCSSを書く事が出来ますね。
コメント ※ハンドルネームでお願いします