: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>

تحقق سريع

مراجعة