CSS :nth-last-childで後ろから数えてCSSを適用する
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
tr:nth-last-child(数字){cssコード}
:nth-last-child() は CSS の擬似クラスで、兄弟要素のグループの中での位置に基づいて選択します。
後ろから数えてCSSを適用します。
使用例
<!DOCTYPE html> <html> <head> <style> /*tableのcssコード*/ table { table-layout: auto; border-collapse: collapse; width: 100px; } /*後ろから数えて2行目*/ tr:nth-last-child(2){ background-color:gray; color:red; } td { border: 1px solid green; } </style> </head> <body> <table> <tr><td>tokyo</td></tr> <tr><td>oosaka</td></tr> <tr><td>fukuoka</td></tr> <tr><td>yokohama</td></tr> </table> </body> </html>
実行結果
文字「fukuoka」の文字色(red)、背景色(gray)が変わります。