「CSS」nth-last-childで後ろから数えてCSSを適用する方法

2020年9月17日

構文
:nth-last-child(数値)
CSSコード

table {
  border: 1px solid green;
}
/* 後ろから2番目から最初までの要素を選択 */
tr:nth-last-child(n+2) {
  color: blue;
}

/* 後ろから2番目の要素のみを選択 */
tr:nth-last-child(2) {
  font-weight: 10;
}

htmlコード

<table>
      <tr><td>test data 1111</td></tr>
      <tr><td>test data 2222</td></tr>
      <tr><td>test data 3333</td></tr>
      <tr><td>test data 4444</td></tr>
</table>