عرض مصدر CSS/Descendant Selectors

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

المُحدِّد الآتي سيُطابِق عنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> التي تكون أبناءً للقائمة <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code> ذات الصنف <code>my-things</code>:<syntaxhighlight lang="css">
ul.my-things li {
  margin: 2em;
}
</syntaxhighlight>يمكن أن يكون مُحدِّد العناصر السلسلة فراغًا أو أكثر، أو مفتاح الجدولة tab، أو سطر جديد، على ألّا يكون هنالك رمز آخر بين المُحدِّدين.

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

الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
selector1 selector2 { style properties }
</syntaxhighlight>أو:<syntaxhighlight lang="css">
selector1 >> selector2 { style properties }
</syntaxhighlight>

== أمثلة ==
لاحظ كيف سنُحدِّد شكل الإشارة إلى عناصر القائمة <code>[[HTML/li|<nowiki><li></nowiki>]]</code> باستخدام الخاصية <code>[[CSS/list-style-type|list-style-type]]</code>:<syntaxhighlight lang="css">
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="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>
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|مدعومة
|مدعومة
|مدعومة
|مدعومة
|مدعومة
|-
!الرمز <code><<</code>
|غير مدعوم
|غير مدعوم
|غير مدعوم
|غير مدعوم
|10
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#descendant-combinators Selectors Level 4]. أضافت هذه المواصفة استخدام الرمز <code><<</code> بالإضافة إلى الفراغات.
*مواصفة [https://drafts.csswg.org/selectors-3/#descendant-combinators Selectors Level 3].
*مواصفة ‎[http://www.w3.org/TR/CSS2/selector.html#descendant-selectors CSS Level 2 (Revision 1)]‎.
*مواصفة [http://www.w3.org/TR/CSS1/#contextual-selectors CSS Level 1].
[[تصنيف:CSS]]
[[تصنيف:CSS Selectors]]