CSS :nth-child()

Oct 29, 2020 by Hsiangming Lo

使用 nth-child 選取指定個數的元素。

<style>
  /* 在body中，單數並且有.item的元素 */
  body .item:nth-child(odd){
    background-color:#ccc;
  }

  /* 在body中，雙數並且有.item的元素 */
  body .item:nth-child(even){
    background-color:#ccc;
  }

  /* 在body中，第1個並且有.item的元素 */
  body .item:nth-child(1){
    background-color:#ccc;
  }

  /* 在body中，第1, 4, 7...並且有.item的元素 */
  body .item:nth-child(3n+1){
    background-color:#ccc;
  }
  /* 3 * 0 + 1 = 1 */
  /* 3 * 1 + 1 = 4 */
  /* 3 * 2 + 1 = 7 */
</style>