Pseudo-class :nth-child() ใน CSS

CSS :nth-child() pseudo-class ใช้เลือกองค์ประกอบที่เป็นลูกลำดับที่ n ของพาเรนต์

ไวยากรณ์ (Syntax)

:nth-child(/*argument*/) {
  /* declarations */
}

ตัวอย่างที่ 1: จัดสีกล่องตามลำดับ

<!DOCTYPE html>
<html>
<head>
  <title>CSS :nth-child() Pseudo Class</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; box-sizing: border-box; }
    input[type="button"] { border-radius: 10px; }
    .child {
      display: inline-block; height: 40px; width: 40px;
      color: white; border: 4px solid black;
    }
    .child:nth-child(1) { background-color: #FF8A00; }
    .child:nth-child(2) { background-color: #F44336; }
    .child:nth-child(3) { background-color: #C303C3; }
    .child:nth-child(4) { background-color: #4CAF50; }
    .child:nth-child(5) { background-color: #03A9F4; }
    .child:nth-child(6) { background-color: #FEDC11; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS :nth-child() Pseudo Class</legend>
      <div id="container">
        <div class="child"></div><div class="child"></div><div class="child"></div>
        <div class="child"></div><div class="child"></div><div class="child"></div>
      </div><br>
    </fieldset>
  </form>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: ใช้กับรายการสนามกีฬา

<!DOCTYPE html>
<html>
<head>
  <style>
    * { font-size: 1.1em; list-style: circle; }
    li:first-child {
      background-color: seashell; font-family: cursive;
    }
    li:nth-child(2) {
      background-color: azure; font-family: "Brush Script Std", serif;
    }
    li:last-child {
      background-color: springgreen; font-family: "Gigi", Arial;
    }
  </style>
</head>
<body>
  <p>Famous Cricket Stadiums</p>
  <ul>
    <li>Eden Gardens, Kolkata, India</li>
    <li>Melbourne Cricket Ground, Melbourne, Australia</li>
    <li>DY Patil Sports Stadium, Navi Mumbai, India</li>
  </ul>
</body>
</html>

ผลลัพธ์

รูปแบบ argument ที่ใช้ได้

Pseudo-classes ที่เกี่ยวข้อง

• :first-child - ลูกคนแรก (เทียบเท่า :nth-child(1))
• :last-child - ลูกคนสุดท้าย
• :nth-last-child() - นับจากหลังมาหน้า
• :only-child - ลูกคนเดียวของพาเรนต์