قوة الأنماط: استخدام nth-child

جزء من قسم CSS Mastery في رحلة HTML على Coddy — الدرس 15 من 43.

تقوم الفئة الزائفة :nth-child() بتحديد العناصر بناءً على ترتيبها داخل العنصر الأب، وذلك باستخدام رقم أو نمط لاختيار العناصر المطلوبة.

على سبيل المثال، لدينا قائمة:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

هذه هي الطريقة التي نختار بها عناصر القائمة ذات الأرقام الزوجية:

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

هذه هي طريقة تحديد العنصر الثالث:

li:nth-child(3) {
  font-weight: bold;
}

هذه هي طريقة تحديد كل عنصر خامس:

li:nth-child(5n) {
  color: red;
}

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

التحدي

سهل

أنشئ قاعدة CSS باستخدام :nth-child() لإعطاء كل عنصر <div> ثالث خلفية yellow.

ورقة مرجعية

تحدد الفئة الزائفة :nth-child() العناصر بناءً على ترتيبها داخل العنصر الأب.

تحديد العناصر ذات الأرقام الزوجية:

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

تحديد عنصر محدد (الثالث):

li:nth-child(3) {
  font-weight: bold;
}

تحديد كل عنصر n (كل خامس عنصر):

li:nth-child(5n) {
  color: red;
}

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Pattern Power: Using nth-child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</body>
</html>

اختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.