مكونات الاختيار 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

مستعملة المثال وصف المثال
element element div p اختيار جميع عناصر <p> الموجودة داخل عناصر <div>.
element>element div > p اختر كل <p> الذي يكون عنصره الأب هو <div>.
element+element div + p اختر كل <p> يتبعه <div>.
element1~element2 p ~ ul اختر كل <ul> الذي يحتوي على <p> كأول عنصر.

قراءة متعمقة

كتب الإضافية:محدد CSS السليلة

كتب الإضافية:محدد CSS الفئة الفئة

كتب الإضافية:محدد CSS الأخ