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

جزء من قسم 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 بكسل

جرّب بنفسك

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