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

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

مُحدِّد العناصر الأبناء (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 مدعومة مدعومة

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