Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

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

2018年:Cocotiie(ココッティー)として運営開始。
テーマを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を書く事が出来ますね。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX