عرض مصدر CSS/Adjacent Sibling Selectors

<noinclude>{{DISPLAYTITLE:محددات العناصر الأخوة المتجاورة}}</noinclude>
مُحدِّد العناصر الأخوة المتجاورة (adjacent sibling combinator) في CSS رمزه <code>+</code> ويفصل بين مُحدِّدين، ويطُابِق العنصر الثاني إذا أتى '''مباشرةً''' بعد العنصر الأول وكان كلا العنصرين ابنًا لعنصر أب مشترك.

المُحدِّد الآتي سيُطابِق الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code> التي تأتي مباشرةً بعد الصور <code>[[HTML/img|<img>]]</code>:<syntaxhighlight lang="css">
img + p {
  font-style: bold;
}
</syntaxhighlight>الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
former_element + target_element { style properties }

</syntaxhighlight>
== أمثلة ==
لاحظ أثر استخدام الفئة الزائفة ‏‏(pseudo-class)‏‏ <code>[[CSS/:first-of-type|‎:first-of-type]]</code> لتحديد أوّل عنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> في الصفحة، وكيف أدى مُحدِّد العناصر الأخوة <code>+</code> إلى تحديد عنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> الثاني في القائمة:<syntaxhighlight lang="css">
li:first-of-type + li {
  color: red;
}
</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="html">
<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|مدعومة
|مدعومة
|7.0
|مدعومة
|مدعومة
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#adjacent-sibling-combinators Selectors Level 4]. أعادت تسمية هذا المُحدِّد إلى next-sibling.
*مواصفة [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)]‎.
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]