:nth-child และ :nth-of-type

คลาสเทียมเชิงโครงสร้างคืออะไร

:first-child และ :last-child

<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>

พื้นฐาน :nth-child()

<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>

:nth-child() กับคีย์เวิร์ด

<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>

:nth-child() กับสูตร

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

:nth-of-type()

<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>

:first-of-type และ :last-of-type

<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />

:nth-child เทียบกับ :nth-of-type

:only-child และ :only-of-type

<div><p>I'm the only child in this div.</p></div>

:nth-child กับตัวเลือก of S (สมัยใหม่)

<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>

การใช้งานจริง: ระยะห่างกริดในแถวสุดท้าย

<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>

ตรวจสอบอย่างรวดเร็ว

สรุป