今回は疑似クラスの解説をしていきます。
それではいってみましょう！
Menu
兄弟のn番目
:nth-child(n)｛プロパティ｝；
クラスtwoの子の3番目を赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 兄弟の3番目*/ .two>:nth-child(3) { color: red; } |
兄弟の偶数番目
:nth-child(even)｛プロパティ｝；
divの子の偶数番目を赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 兄弟の偶数番目*/ div>:nth-child(even) { color: red; } |
兄弟の奇数番目
:nth-child(odd)｛プロパティ｝；
divの子の奇数番目を赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 兄弟の奇数番目*/ div>:nth-child(odd) { color: red; } |
兄弟の後ろからn番目
:nth-last-child(n)｛プロパティ｝；
クラスthreeの子の後ろから3番目に赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 後ろからn番目の兄弟 */ .three>:nth-last-child(3) { color: red; } |
兄弟の指定要素のn番目
:nth-of-type(n)｛プロパティ｝；
クラスoneの子のli要素の1番目に赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 同じ要素のn番目の兄弟 */ .one>li:nth-of-type(1) { color: red; } |
兄弟の指定要素の末尾からn番目
:nth-last-of-type(n)｛プロパティ｝；
クラスfourの子のli要素の末尾から3番目に赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 同じ要素の末尾からn番目の兄弟 */ .four>li:nth-last-of-type(3) { color: red; } |
子孫の指定要素の一番末尾
:last-child｛プロパティ｝；
子孫のli要素の一番末尾の要素を赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 子孫の指定要素の一番末尾 */ li:last-child { color: red; } |
兄弟の指定要素の先頭
:first-of-type｛プロパティ｝；
クラスthreeの子のli要素の先頭を赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 兄弟の指定要素の先頭 */ .three>li:first-of-type { color: red; } |
兄弟の指定要素の末尾
:last-of-type｛プロパティ｝；
クラスthreeの子のli要素の末尾を赤色の文字にする例
※順番は1から数えます。
1 2 3 4 | /* 兄弟の指定要素の末尾 */ .three>li:last-of-type { color: red; } |
まとめ
JavascriptやJQueryを使用しなくても、CSSだけで操作変更ができるので便利ですね！
以上です。
