よく使うものだけね。
この記事の
最新版を書き起こしました。新しく追加された擬似クラスもあるので、気になる人はリンク先にGo！
CSSの擬似クラスを使えば、複雑なCSSを書かなくても「色分けされた表」や「リスト」などが簡単に作れてしまいます。
自分の備忘録も兼ね、その方法をザックリとまとめておきます。
サンプル
まず、シンプルなリストを作ってみましょう。
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
</ul>
とりあえず5つの項目が入ったリストを作ってみました。この各項目を、擬似要素を使って色々といじってみましょう。
最初の要素にスタイルを適用
li:first-child{
background: #ff8080;
}
最後の要素にスタイルを適用
li:last-child{
background: #ff8080;
}
奇数番目の要素にスタイルを適用
li:nth-child(odd){
background: #ff8080;
}
偶数番目の要素にスタイルを適用
li:nth-child(even){
background: #ff8080;
}
上からn番目の要素にスタイルを適用
li:nth-child(2){
background: #ff8080;
}
li:nth-child(
n)・・・上からn番目の要素にスタイルを適用
下からn番目の要素にスタイルを適用
li:nth-last-child(2){
background: #ff8080;
}
li:nth-last-child(
n)・・・下からn番目の要素にスタイルを適用
以上。
関連するかもしれない記事
