Web模様

未経験からWebデザイナーになった私の備忘録

便利!何番目系の擬似クラスまとめ

   

擬似クラスとは?

便利~!と思ってなんとなく使っているけど、きちんとは理解していなかった…。
いまさら感はあるけれどおさらいとして、メモメモ。

擬似クラスとは要素が特定の状態のときにスタイルを指定するもの。
セレクタの後ろに” : “をつけて記述する。

これを使えば、簡単にいろいろな条件でcssが指定できます。

:○○-childのまとめ

よくあれ?あれはなんだっけ?となってしまうので
私がよく使うものをメモ。

:first-child

親要素から見て子要素の最初の要素にスタイルを適用

li:first-child {
	background: #FF8E8E;
}
  • List1
  • List2
  • List3
  • List4
  • List5

:last-child

親要素から見て子要素の最後の要素にスタイルを適用

li:last-child {
	background: #FF8E8E;
}
  • List1
  • List2
  • List3
  • List4
  • List5

:nth-child(odd)

奇数番目の要素にスタイルを適用

li:nth-child(odd) {
	background: #FF8E8E;
}
  • List1
  • List2
  • List3
  • List4
  • List5

:nth-child(even)

偶数番目の要素にスタイルを適用

li:nth-child(even) {
	background: #FF8E8E;
}
  • List1
  • List2
  • List3
  • List4
  • List5

:nth-child(X)

上からX番目の要素にスタイルを適用。
:nth-child(X)の”X”の部分を適用させたい番目に変更する。

たとえば下のデモの場合、上から2番目に適用させています。

li:nth-child(2) {
	background: #FF8E8E;
}
  • List1
  • List2
  • List3
  • List4
  • List5

:nth-last-child(X)

下からX番目の要素にスタイルを適用。
:nth-last-child(X)の”X”の部分を適用させたい番目に変更する。

たとえば下のデモの場合、下から2番目に適用させています。

li:nth-last-child(2) {
	background: #FF8E8E;
}
  • List1
  • List2
  • List3
  • List4
  • List5

:nth-child(Xn)

X番ずつスタイルが適用される。
たとえば
:nth-child(2n)だと、2,4,6,8,10,12….
:nth-child(3n)だと、3,6,9,12,15,18….
のようなかんじ。

下のデモは:nth-child(3n)を適用しています。

li:nth-child(3n) {
	background: #FF8E8E;
}
  • List1
  • List2
  • List3
  • List4
  • List5
  • List6
  • List7
  • List8
  • List9
  • List10
  • List11
  • List12
  • List13
  • List14
  • List15

以上がよく使っているかなと思いますが、ほかにもたくさん指定はあります。
随時、使用してみて覚えたいときに追加していきます。

 - web , ,