محدد الأحفاد

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

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

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

الآن، لنستخدم محدد السليل (descendant selector) لتنسيق جميع الفقرات داخل الـ div:

.container p {
    color: blue;
}

ستتحول جميع الفقرات الموجودة داخل div .container إلى اللون الأزرق — حتى تلك المتداخلة داخل عنصر section.

اختبر نفسك

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

اختبر نفسك

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

التحدي

سهل

أنشئ قاعدة CSS تختار جميع عناصر القائمة (<li>) التي تُعد من أحفاد عنصر يحمل الفئة "navigation" وتغير لون النص الخاص بها إلى purple.

ورقة مرجعية

يقوم محدد السليل (descendant selector) بتنسيق العناصر الموجودة داخل عنصر آخر، حتى لو كانت متداخلة بعمق.

الصيغة: استخدم مسافة بين محدد الأب ومحدد السليل:

.container p {
    color: blue;
}

يحدد هذا جميع عناصر <p> الموجودة داخل أي عنصر يحمل الفئة container، بغض النظر عن مستوى التداخل.

جرّب بنفسك

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>

اختبر نفسك

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