Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS] 便利!擬似クラスで〇番目を指定する

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;
}

最初以外を指定

first-child

+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;
}

偶数だけ指定

child

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を書く事が出来ますね。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる