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

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

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

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