موحد CSS
موحد CSS
المدمج هو شيء يشرح العلاقة بين المحددات.
يمكن أن يحتوي محدد CSS على أكثر من محدد بسيط. بين المحددات البسيطة ، يمكننا تضمين مُدمج.
هناك أربعة أدوات دمج مختلفة في CSS:
- محدد تابع (مسافة)
- محدد الأطفال (>)
- محدد الأشقاء المجاور (+)
- محدد الأشقاء العام (~)
محدد النسب
المحدد الفرعي يطابق جميع العناصر المنحدرة من عنصر محدد.
يحدد المثال التالي جميع عناصر <p> الموجودة داخل عناصر <div>:
مثال
div p {
background-color: yellow;
}
منتقي الطفل (>)
يحدد المحدِّد الفرعي جميع العناصر التي هي عناصر فرعية لعنصر محدد.
يحدد المثال التالي جميع العناصر <p> التي هي أبناء عنصر <div>:
مثال
div > p {
background-color: yellow;
}
محدد الأخوة المجاور (+)
يتم استخدام محدد الأخوة المجاور لتحديد عنصر يقع مباشرة بعد عنصر محدد آخر.
يجب أن تحتوي العناصر الشقيقة على نفس العنصر الأصل ، وتعني كلمة "المجاورة" "التالي مباشرة".
يحدد المثال التالي العنصر <p> الأول الذي يتم وضعه مباشرة بعد عناصر <div>:
مثال
div + p {
background-color: yellow;
}
المحدد العام للأخوة (~)
يحدد محدد الأشقاء العام جميع العناصر التي هي الأشقاء التالية لعنصر محدد.
يحدد المثال التالي جميع عناصر <p> التي هي الأشقاء التاليين لعناصر <div>:
مثال
div ~ p {
background-color: yellow;
}
جميع محددات CSS Combinator
Selector | Example | Example description |
---|---|---|
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |