قوة الأنماط: استخدام 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.
جرّب بنفسك
<!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>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس CSS Mastery
1إتقان المحددات – الربط
مقدمةمحدد الأحفادمحدد الأبناءمحدد الأشقاء المتجاورينمحدد الأشقاء العامتحدي المراجعة3الأصناف الزائفة الهيكلية (Structural pseudo-classes)
الأصناف الزائفة الهيكلية (Structural pseudo-classes)استهداف الابن الأولاستهداف الابن الأخيرقوة الأنماط: استخدام nth-childتحدي المراجعة