疑似クラスで最初、最後、n番目や奇数、偶数を指定|CSS

疑似クラスで最初、最後、n番目や奇数、偶数を指定|CSS CSS
この記事は約2分で読めます。
スポンサーリンク

cssで特定箇所のみにスタイリングしたい場合に効率的にかっこよく書ける疑似クラス特集です。

奇数番目

1,3,5,7,9…番目を装飾する時

li:nth-child(odd) { color: #82fcc9;}
  • リスト(奇数)
  • リスト(偶数)
  • リスト(奇数)
  • リスト(偶数)
  • リスト(奇数)
  • リスト(偶数)
  • リスト(奇数)

偶数番目

2,4,6,8…番目を装飾する時

li:nth-child(even) { color: #82fcc9;}
  • リスト(奇数)
  • リスト(偶数)
  • リスト(奇数)
  • リスト(偶数)
  • リスト(奇数)
  • リスト(偶数)
  • リスト(奇数)

上からn番目

li:nth-child(4) { color: #82fcc9;}
  • リスト(1)
  • リスト(2)
  • リスト(3)
  • リスト(4)
  • リスト(5)
  • リスト(6)
  • リスト(7)

下からn番目

li:nth-last-child(2) { color: #82fcc9;}
  • リスト(1)
  • リスト(2)
  • リスト(3)
  • リスト(4)
  • リスト(5)
  • リスト(6)
  • リスト(7)

最初の要素

li:first-child { color: #82fcc9;}
  • リスト(1)
  • リスト(2)
  • リスト(3)
  • リスト(4)
  • リスト(5)
  • リスト(6)
  • リスト(7)

最後の要素

li:last-child { color: #82fcc9;}
  • リスト(1)
  • リスト(2)
  • リスト(3)
  • リスト(4)
  • リスト(5)
  • リスト(6)
  • リスト(7)

最初からn番目まで

li:nth-child(-n+3) { color: #82fcc9;}
  • リスト(1)
  • リスト(2)
  • リスト(3)
  • リスト(4)
  • リスト(5)
  • リスト(6)
  • リスト(7)

n番目から最後まで

li:nth-child(n+4) { color: #82fcc9;}
  • リスト(1)
  • リスト(2)
  • リスト(3)
  • リスト(4)
  • リスト(5)
  • リスト(6)
  • リスト(7)

最後からn番目まで

li:nth-last-of-type(2) { color: #82fcc9;}
  • リスト(1)
  • リスト(2)
  • リスト(3)
  • リスト(4)
  • リスト(5)
  • リスト(6)
  • リスト(7)
SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました