以前、奇数・偶数行にテーブルの行を色分けするという記事で疑似クラスについて紹介しましたが、そう言えば一番最初の要素・最後の要素の指定方法についてはまとめてなかったので、今回まとめ。
…どちらかと言うと、こちらの方法の方が使用頻度が高そうな気もするのですが、何故か今まであまり使う機会がなかったのですよね。
使い方と言っても指定方法は全く難しくありません。
たとえば、下記のような <table> 要素があったとして、この最初と最後の行にのみ背景色を指定してみます。
<table> <tr><th>見出し1</th><td>詳細1</td></tr> <tr><th>見出し2</th><td>詳細2</td></tr> <tr><th>見出し3</th><td>詳細3</td></tr> <tr><th>見出し4</th><td>詳細4</td></tr> <tr><th>見出し5</th><td>詳細5</td></tr> </table>
その場合は、下記のように指定すればOKです。
table tr:first-child, table tr:last-child {
background-color: rgba(255, 0, 0, 0.3);
}
「最初の要素」を指定したい場合、その子要素に :first-child という擬似クラスを指定し、指定したいプロパティを記述します。
「最後の要素」も同様に、子要素に :last-child という疑似クラスを指定します。
やっていることはこれだけ！
:nth-child(n) 疑似クラスも覚えておくと便利ですが、今回の「最初と最後の要素」という指定方法も、ふとした拍子に使うことがあったりするので、併せて覚えておきたいと思います。
以上、CSS で最初と最後の子要素にのみ、特定のプロパティを指定する方法でした。
ご参考になれば幸いです。
