الفرق بين المراجعتين ل"CSS/Child Selectors"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 48: | سطر 48: | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#child-combinators Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#child-combinators Selectors Level 3]. | ||
*مواصفة [http://www.w3.org/TR/CSS2/selector.html#child-selectors CSS Level 2 (Revision 1)]. | *مواصفة [http://www.w3.org/TR/CSS2/selector.html#child-selectors CSS Level 2 (Revision 1)]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Selectors]] | + | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 15:40، 28 يناير 2018
مُحدِّد العناصر الأبناء (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).