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

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

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

</syntaxhighlight>
== أمثلة ==
لاحظ كيف حددنا عناصر <code>[[HTML/span|<nowiki><span></nowiki>]]</code> التي تأتي بعد الفقرات <code>[[HTML/p|<nowiki><p></nowiki>]]</code>، حتى تلك التي لا تأتي بعدها مباشرةً:<syntaxhighlight lang="css">
p ~ span {
  color: red;
}
</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="html">
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|1.0
|1.0
|7.0
|9.0
|3.0
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#general-sibling-combinators Selectors Level 4]، أعادت تسمية هذا المُحدِّد إلى subsequent-sibling.
*مواصفة [https://drafts.csswg.org/selectors-3/#general-sibling-combinators Selectors Level 3].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]