リストでよく使いそうなものだけをピックアップしました。
今回使うリストはこちら。
|
1 2 3 4 5 6 7 |
<ul class="checklist"> <li>1,DummyText</li> <li>2,DummyText</li> <li>3,DummyText</li> <li>4,DummyText</li> <li>5,DummyText</li> </ul> |
見やすいように少しだけCSSをいじっていますが、至ってシンプルなリストです。
目次
:first-child
|
1 2 3 |
li:first-child{ background: #e74c3c ; } |
:last-child
|
1 2 3 |
li:last-child{ background: #e74c3c ; } |
:nth-child(odd)
|
1 2 3 |
li:nth-child(odd){ background: #e74c3c ; } |
:nth-child(even)
|
1 2 3 |
li:nth-child(even){ background: #e74c3c ; } |
:nth-child(n)
|
1 2 3 |
li:nth-child(2){ background: #e74c3c ; } |
:nth-last-child(n)
|
1 2 3 |
li:nth-last-child(2){ background: #e74c3c ; } |
:not(条件)
|
1 2 3 |
li:not(:first-child){ background: #e74c3c; } |
見づらくなるので、このサンプルのみul{border:none}を指定しています。
|
1 2 3 |
li:not(:first-child){ border-top: 1px solid #bfbfbf; } |
|
1 2 3 4 5 6 |
li{ background: #e74c3c; } li:nth-child(even){ background: #3498db; } |
これだけ覚えてれば、とりあえずリスト周りの装飾はどうにでもなりそうです。
ちなみに、最初のliだけborderを消したいとき、管理人は今まで全てのliにborder-topを指定してからli:first-child{border:none}で打ち消すという方法を使っていました…:not()を使ったほうがスマートに書けますね。復習して良かった。
