محدد الابن (Child selector)

الدرس 7 من 15 في دورة محددات CSS على Coddy.

محدد الابن (child selector) هو نوع من محددات CSS الذي يختار جميع العناصر التي تعتبر أبناءً مباشرين لعنصر محدد. يُشار إلى محدد الابن بعلامة "أكبر من" (>) بين محددين.

مثال:

تأمل هيكل HTML التالي:

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

لاستهداف فقرة الابن المباشر، يمكنك استخدام رابط الابن (child combinator) كما يلي:

.parent > p {
    color: blue;
}

في هذا المثال، ستتحول فقرة الابن المباشر فقط إلى اللون الأزرق، وليس الفقرة المتداخلة داخل عنصر <div> الداخلي.

يمكن أيضاً استخدام محددات الابن لتجنب تنسيق العناصر التي ليست أبناءً مباشرين لعنصر محدد. على سبيل المثال، يمكنك استخدام محدد الابن لتنسيق جميع الروابط التي تعتبر أبناءً مباشرين لعنصر p لتكون باللون الأحمر.

التحدي

سهل

بالنظر إلى هيكل HTML التالي، أنشئ قاعدة CSS باستخدام المجمع الفرعي (child combinator) لتنسيق عناصر القائمة المباشرة داخل عنصر <ul> لتكون خلفيتها باللون "yellow".

جرّب بنفسك

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</body>
</html>

جميع دروس محددات CSS

1مقدمة في محددات CSS

الغرض من محددات CSS لماذا هي مهمة؟

4محددات الخصائص

مقدمة في محددات الخصائص التواجد والقيم المطابقة محددات قيم الخصائص محددات قيم الخصائص 2 محددات قيم الخصائص 3

2المحددات البسيطة

محددات النوع محددات Class محددات ID المحددات العامة

3محددات الربط (Combinator Selectors)

محدد الابن (Child selector)محدد الأحفاد (Descendant selector)محدد الشقيق المجاور (Adjacent sibling selector)محدد الشقيق العام (General sibling selector)