استهداف الابن الأخير

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

تحدد الفئة الزائفة :last-child العناصر التي تكون الابن الأخير لوالدها.

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

<div class="parent">
  <p>First paragraph</p>
  <p>Middle paragraph</p>
  <p>Last paragraph</p>
</div>

لتنسيق الفقرة الأخيرة فقط، استخدم الفئة الزائفة :last-child:

p:last-child {
  color: red;
  font-weight: bold;
}

بعد تطبيق CSS هذا، ستكون عبارة "Last paragraph" فقط باللون الأحمر وبخط عريض لأنها العنصر الابن الأخير (last child) لعنصر div الأب.

اختبر نفسك

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

اختبر نفسك

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

التحدي

سهل

أنشئ قاعدة CSS لتنسيق آخر عنصر <p> في أي مجموعة من الفقرات.

قم بتنسيقه بـلون خلفية أزرق (#046ae0) و نص white.
اجعل وزن الخط (font weight) للفقرة الأخيرة bold.

ورقة مرجعية

تقوم الفئة الزائفة :last-child بتحديد العناصر التي تكون الابن الأخير لوالدها:

p:last-child {
  color: red;
  font-weight: bold;
}

سيقوم هذا بتنسيق عنصر الفقرة الأخير فقط داخل الحاوية الأب الخاصة به.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the Last Child</title>
  <style>
    /* Write your CSS rule here */

  </style>
</head>
<body>
    <div> 
        <h2>Exploring the Universe</h2>
        <p>The universe is vast, with countless stars and galaxies waiting to be discovered.</p>
        <p>New technologies allow us to explore deeper into space, revealing its many secrets.</p>
        <p>We continue to learn more about distant planets and the possibility of life beyond Earth.</p> 
    </div>
    <div>
        <h2>The Deep Ocean</h2>
        <p>Our oceans are mysterious, covering most of Earth, yet we know so little about them.</p>
        <p>Many species live in extreme conditions, some of which are still being discovered today.</p>
        <p>Exploring the ocean depths gives us insights into life at the planet's most remote locations.</p> 
    </div>
</body>
</html>

اختبر نفسك

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