CSS :nth-last-childで後ろから数えてCSSを適用する

2022年11月8日

環境
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)が変わります。

CSS

Posted by arkgame