محددات العناصر الأبناء

مُحدِّد العناصر الأبناء (child combinator) في CSS رمزه ‎>‎ ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا كان ابنًا للعنصر الأول.

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

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

يجب أن تكون العناصر المُطابَقة من المُحدِّد الثاني هي أبناء مباشرة للعناصر المُطابَقة من المُحدَّد الأوّل. وهنالك مُحدِّد آخر هو مُحدِّد العناصر السليلة الذي يُطابِق جميع العناصر التي تكون أبناءً مباشرةً أو غير مباشرةً للعناصر المُطابَقة من العنصر الأول. الشكل العام لهذا المحدد:

selector1 > selector2 { style properties }

أمثلة

لاحظ كيف سنُحدِّد عناصر <span> التي تكون أبناءً مباشرةً للعنصر <div>، انتبه إلى أنَّ عناصر <span> السليلة (التي التي ليست أبناءً مباشرةً للعنصر <div>) لن تُحدَّد:

span {
  background-color: white;
}

div > span {
  background-color: skyblue;
}

شيفرة HTML:

<div>
  <span>Span #1, in the div.
    <span>Span #2, in the span that's in the div.</span>
  </span>
</div>
<span>Span #3, not in the div at all.</span>

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	مدعومة	مدعومة	7.0	مدعومة	مدعومة

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

• مسودة Selectors Level 4.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.