使用 :last-child 設定最後一列視覺 | 點燈坊

當使用 List 顯示資料時，若想對最後一列設定不同視覺，可使用 :last-child 達成。

Version

CSS 3

Parent Node

最後一列以灰底加以區別。

<template>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul :last-child {
  background-color: lightgray;
}
</style>

第 2 行

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

使用 <ul> 與 <li> 顯示資料。

10 行

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

• list-style: none：使用 none 使 <ul> 不顯示 bullet
• margin: 0：將 margin reset 為 0
• padding: 0：將 margin reset 為 0

16 行

ul :last-child {
  background-color: lightgray;
}

:last-child 若要套用在 parent node，則 ul 與 :last-child 之間需要有空格。

Child Node

最後一列以灰底加以區別。

<template>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</template>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li:last-child {
  background-color: lightgray;
}
</style>

16 行

li:last-child {
  background-color: lightgray;
}

:last-child 若要套用在 child node，則 li 與 :last-child 之間沒有空格。

Conclusion

• 亦可使用 :nth-child(3)，但若 <li> 筆數不確定，則 n 很難確定，但 :last-child 可確保為最後一列

Reference

MDN, :last-child