محددات العناصر الأخوة

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

مُحدِّد العناصر الأخوة العامة (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

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