استهداف الابن الأول

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

تستهدف الفئة الزائفة :first-child العنصر الأول ضمن مجموعة من العناصر الأشقاء.

على سبيل المثال:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

أي فقرة تكون العنصر الابن الأول داخل العنصر الأب الخاص بها سيتم تلوينها باللون الأزرق وسيكون نصها عريضاً.

p:first-child {
  color: blue;
  font-weight: bold;
}

يمكنك دمج وتطبيق المحددات المنحدرة (descendant)، والابن (child)، والمحددات الأخرى لاستهداف العناصر بشكل أكثر دقة. إليك مثالاً آخر:

div:first-child h1 {
 color: red;
}

يحدد هذا عنصر div الأول بين أشقائه، ثم يغير لون نص علامة <h1> بداخله إلى اللون الأحمر.

اختبر نفسك

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

اختبر نفسك

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

التحدي

سهل

أنشئ قاعدة CSS تستهدف عنصر القائمة الأول (<li>) في أي قائمة غير مرتبة (<ul>) وقم بتنسيقه بما يلي:

لون نص أزرق
لون خلفية أصفر فاتح
حشوة يسرى (padding-left) بمقدار 10 بكسل

ورقة مرجعية

تستهدف الفئة الزائفة (pseudo-class) المسماة :first-child العنصر الأول ضمن مجموعة من العناصر الأشقاء.

p:first-child {
  color: blue;
  font-weight: bold;
}

يمكنك دمج :first-child مع محددات أخرى لاستهداف أكثر تحديداً:

div:first-child h1 {
  color: red;
}

يؤدي هذا إلى تحديد أول عنصر div بين أشقائه، ثم يستهدف وسم h1 بداخله.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>

اختبر نفسك

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