CSS/General Sibling Selectors

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

المُحدِّد الآتي سيُطابِق الفقرات <p> التي تأتي بعد الصور <img> ولها الأب نفسه:

img ~ p {
  color: red;
}

الشكل العام لهذا المحدد:

former_element ~ target_element { style properties }

أمثلة

لاحظ كيف حددنا عناصر <span> التي تأتي بعد الفقرات <p>، حتى تلك التي لا تأتي بعدها مباشرةً:

p ~ span {
  color: red;
}

شيفرة 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>

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	7.0	9.0	3.0

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

• مسودة Selectors Level 4، أعادت تسمية هذا المُحدِّد إلى subsequent-sibling.
• مواصفة Selectors Level 3.