CSS/Descendant Selectors

مُحدِّد العناصر السليلة (descendant combinator) في CSS الذي يُمثَّل عادةً بفراغٍ واحد ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

المُحدِّد الآتي سيُطابِق عنصر <li> التي تكون أبناءً للقائمة <ul> ذات الصنف my-things:

ul.my-things li {
  margin: 2em;
}

يمكن أن يكون مُحدِّد العناصر السلسلة فراغًا أو أكثر، أو مفتاح الجدولة tab، أو سطر جديد، على ألّا يكون هنالك رمز آخر بين المُحدِّدين.

وبسبب طبيعة هذا المُحدِّد التي لا تضع حدًا معيّنًا لعدد الأحرف التي تُمثِّله مقارنةً بغيره من المُحدِّدات، فأضيف شكلٌ آخر لهذا المُحدِّد هو إشارتَي «أكبر من» ‎>>‎، مما يعطي هذا المُحدِّد شكلًا شبيهًا بمُحدِّد العناصر الأبناء لأنهما يتشاركان الوظيفة تقريبًا.

الشكل العام لهذا المحدد:

selector1 selector2 { style properties }

أو:

selector1 >> selector2 { style properties }

أمثلة

لاحظ كيف سنُحدِّد شكل الإشارة إلى عناصر القائمة <li> باستخدام الخاصية list-style-type:

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

شيفرة HTML:

<ul>
  <li>
    <div>Item 1</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
  <li>
    <div>Item 2</div>
    <ul>
      <li>Subitem A</li>
      <li>Subitem B</li>
    </ul>
  </li>
</ul>

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	مدعومة	مدعومة	مدعومة	مدعومة	مدعومة
الرمز <<	غير مدعوم	غير مدعوم	غير مدعوم	غير مدعوم	10

مصادر ومواصفات

• مسودة Selectors Level 4. أضافت هذه المواصفة استخدام الرمز << بالإضافة إلى الفراغات.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.