الفرق بين المراجعتين لصفحة: «CSS/Adjacent Sibling Selectors»
< CSS
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 42: | سطر 42: | ||
*مواصفة [https://drafts.csswg.org/selectors-3/#adjacent-sibling-combinators Selectors Level 3]. | *مواصفة [https://drafts.csswg.org/selectors-3/#adjacent-sibling-combinators Selectors Level 3]. | ||
*مواصفة [http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors CSS Level 2 (Revision 1)]. | *مواصفة [http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors CSS Level 2 (Revision 1)]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Selectors]] | [[تصنيف:CSS Selectors|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 15:35، 28 يناير 2018
مُحدِّد العناصر الأخوة المتجاورة (adjacent sibling combinator) في CSS رمزه + ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى مباشرةً بعد العنصر الأول وكان كلا العنصرين ابنًا لعنصر أب مشترك.
المُحدِّد الآتي سيُطابِق الفقرات <p> التي تأتي مباشرةً بعد الصور <img>:
img + p {
font-style: bold;
}
الشكل العام لهذا المحدد:
former_element + target_element { style properties }
أمثلة
لاحظ أثر استخدام الفئة الزائفة (pseudo-class) :first-of-type لتحديد أوّل عنصر <li> في الصفحة، وكيف أدى مُحدِّد العناصر الأخوة + إلى تحديد عنصر <li> الثاني في القائمة:
li:first-of-type + li {
color: red;
}
شيفرة HTML:
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | مدعومة | مدعومة | 7.0 | مدعومة | مدعومة |
مصادر ومواصفات
- مسودة Selectors Level 4. أعادت تسمية هذا المُحدِّد إلى next-sibling.
- مواصفة Selectors Level 3.
- مواصفة CSS Level 2 (Revision 1).