CSS :nth-child(): คู่มือสมบูรณ์

CSS :nth-child() selector ใช้ style กับ elements ที่ตำแหน่งเฉพาะในกลุ่ม บ่อยครั้งใช้ style list items เฉพาะ เช่นทุก 2 หรือ 3 items

เวลา design website อาจต้องการ style เฉพาะ set ของ elements ใน container เช่น style ทุก element ที่ 2 ใน list หรือทุก row ที่ 3 ใน table

นี่คือที่มาของ CSS :nth-child pseudo-class :nth-child match elements ตามตำแหน่งใน list ของ items บน HTML page

บทเรียนอธิบายพื้นฐาน pseudo-classes และการใช้ :nth-child pseudo-class พร้อมตัวอย่าง จบแล้วคุณจะเป็น expert ใช้ :nth-child select elements บน web page

CSS Pseudo-Classes

ใน CSS selectors ใช้ select elements เฉพาะบน web page ให้ style เช่น selector เปลี่ยน text color ของทุก

elements เป็นสีเขียว

อาจตัดสินใจ style เฉพาะ element ใน specific state Pseudo-classes ให้ใช้ styles ได้เฉพาะตอน element อยู่ใน specific state

CSS :nth-child Pseudo-Class

:nth-child pseudo-class ใช้ styles กับ elements ในกลุ่ม ใช้ style กับ element เฉพาะจากตำแหน่ง หรือ multiple elements rule พบบ่อย: สีทุก element ตำแหน่ง odd หรือ even ใน list

Syntax ของ :nth-child pseudo-class:

li:nth-child(2) { color: lightblue; }

แยกตัวอย่าง:

li element ที่จะใช้ style
nth-child selector match element
2 formula ใช้ match element ด้วย nth-child

กรณีนี้ ใช้ style กับทุก

element ที่ 2 ใน list

ค่าที่ :nth-child ยอมรับ

:nth-child pseudo-class ยอมรับ 2 ประเภทค่า แรก keyword values ที่มี default formulas keywords:

odd: select elements ตำแหน่งเป็นเลขคี่ใน list
even: select elements ตำแหน่งเป็นเลขคู่ใน list

ที่สอง custom formula ระบุ elements ที่ pseudo-class ควร select ตัวอย่าง formulas:

:nth-child(6): select element ที่ 6 ใน list
:nth-child(n+2): select element ที่ 2 และทุก element ต่อไป
:nth-child(4n): select elements ที่เป็น multiple ของ 4 ทั้งหมด

n = ตำแหน่งที่ item ปรากฏใน list

ตอนรู้พื้นฐาน :nth-child แล้ว มาสำรวจตัวอย่าง

CSS :nth-child Examples

เดินผ่าน 2 ตัวอย่าง :nth-child pseudo-class

:nth-child Table

การใช้ :nth-child พบบ่อย: select rows ใน table

สมมติ design website สำหรับ local cookery club ขอ table สำหรับ recipe spiced hot chocolate ต้องการ highlight ทุก row ที่ 2 ใน table ด้วย hot pink สีประจำ club

โค้ดสร้าง table:

<html> <table> <tr> <th>Ingredient</th> <th>Quantity</th> </tr> <tr> <td>Skimmed Milk</td> <td>250 mls</td> </tr> <tr> <td>75% Dark Chocolate</td> <td>Two squares (10g)</td> </tr> <tr> <td>Cinnamon</td> <td>A pinch</td> </tr> <tr> <td>Honey</td> <td>1 tsp</td> </tr> </table> <style> tr:nth-child(even) { background-color: hotpink; } </style>

CSS :nth-child(): คู่มือสมบูรณ์ กดปุ่มใน code editor ด้านบนเพื่อดู output

กำหนด table 2 columns 5 rows (1 header row) Column แรก: ingredients Column ที่สอง: quantities

อ่านเพิ่ม: guide to HTML tables

ใน CSS ใช้ :nth-child pseudo-class style ทุก even-numbered row tr selector select ทุก table rows ( tag) :nth-child(even) select ทุก table row ที่มี ID เลขคู่ สำหรับแต่ละ even row ตั้ง background color = hot pink

:nth-child List

การใช้ :nth-child พบบ่อยอีกอย่าง: highlight items ใน list

สมมติขอ list ชื่อสมาชิก cooking club ข้อความ 3 ชื่อแรกเป็น light blue เพราะมีตำแหน่งใน club

โค้ดสร้าง list:

<html> <ul> <li>Chad Bakersfield</li> <li>Laura Patel</li> <li>Eddie Mahoney</li> <li>Edna Jamieson</li> <li>Lesley Spencer</li> <li>James Moffat</li> <li>Olivia Lindsay</li> <ul> <style> li:nth-child(-n+3) { color: lightblue; } </style>