محدد الأبناء

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

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

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

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

تطبيق التنسيق على الأبناء المباشرين فقط:

.parent > p {
  color: red;
}

بعد تطبيق CSS هذا، ستكون الفقرة الأولى فقط "This is a direct child" باللون الأحمر. لن تتأثر الفقرة الثانية لأنها ليست ابناً مباشراً لـ div الذي يحمل الفئة "parent".

اختبر نفسك

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

اختبر نفسك

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

التحدي

سهل

لديك .team-container يحتوي على عدة أقسام للفرق. مهمتك هي:

استخدم محدد الابن (child selector) لتنسيق عناصر div التابعة مباشرة داخل .team-container بخلفية "lightblue"، و "padding" بمقدار "10px"، و "margin" بمقدار "5px".
استخدم محدد الابن لتنسيق عناصر <h3> التابعة مباشرة داخل عناصر .team بلون "green" وحجم خط "20px".

ورقة مرجعية

يختار محدد الابن المباشر (>) الأبناء المباشرين فقط للعنصر، وليس الأحفاد الأعمق.

الصيغة (Syntax):

parent > child {
  /* styles */
}

مثال:

<div class="parent">
  <p>Direct child - will be styled</p>
  <section>
    <p>Grandchild - won't be styled</p>
  </section>
</div>

.parent > p {
  color: red;
}

ستكون الفقرة الأولى فقط باللون الأحمر لأنها ابن مباشر لـ .parent.

جرّب بنفسك

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>

اختبر نفسك

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