محدد الأبناء

جزء من قسم 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".

جرّب بنفسك

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