もくじ
擬似クラスとは？
便利～！と思ってなんとなく使っているけど、きちんとは理解していなかった…。
いまさら感はあるけれどおさらいとして、メモメモ。
擬似クラスとは要素が特定の状態のときにスタイルを指定するもの。
セレクタの後ろに” : “をつけて記述する。
これを使えば、簡単にいろいろな条件で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
以上がよく使っているかなと思いますが、ほかにもたくさん指定はあります。
随時、使用してみて覚えたいときに追加していきます。
