محددات العناصر السليلة

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

مُحدِّد العناصر السليلة (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

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