السلام عليكم، رأينا في درس المحدِّدات في CSS المحددات البسيطة و هم :
* محدد العنصر -------------- Element Type Selector
* محدد ID Selector ------------------ ID
* محدد CLASS Selector -------------- CLASS
* المحدد الشامل ------------ Universal Selector
أما اليوم فسنستكمل درس المحددات حيث سنرى :
* المحددات المركبة --------- Combinators
* محددات Attribute Selectors --------- Attribute
المحددات المركبة Combinators
المحددات المركبة و المعروفة إنجليزياً بـ Combinators هي عبارة عن تركيب لعدة محددات مفروقة بعلامة ما ( ',' أو ' ' أو '<' أو '+' أو '~' )، حيث هذه العلامات هي التي تحدد الفرق بين نماذج المحددات المركبة، و لا يفرق إن فُصلت أو لم تفصل المحدادت و العلامات بفراغ عند كتابتها في تنسيق كود CSS.
نموذج المحدد المركب X,Y
الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS للعديد من العناصر المختلفة المحدد، يكفي تفرقتها بالفاصلة Comma ',' حيث تلعب هذه الأخيرة دور واو العطف، و بالتالي يأمر هذا النموذج متصفح الإنترنت بإعطاء نفس المظهر للعناصر صاحبة المحدد X و العناصر صاحبة المحدد Y.
نموذج المحدد المركب X Y
الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS لجميع العناصر صاحبة المحدد Y التي توجد داخل العناصر صاحبة المحدد X، و ذلك بكتابة العنصر المحتوي أولا، ثم فراغ بزر لوحة المفاتيح Space، ثم العنصر المحتوى، و هكذا إلى أن يُحدَّد الهدف المراد تغيير مظهره.
نموذج المحدد المركب X>Y
الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS لجميع العناصر صاحبة المحدد Y التي توجد داخل العناصر صاحبة المحدد X شريطة أن تكون العناصر صاحبة المحدد Y في الحيز الموالي لحيز العناصر صاحبة المحدد X، و ذلك بكتابة العنصر المحتوي أولا، ثم علامة أكبر من '<'، ثم العنصر المحتوى، و هكذا إلى أن يُحدَّد الهدف المراد تغيير مظهره.
نموذج المحدد المركب X+Y
الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لأول عنصر صاحب المحدد Y الذي يوجد مباشرة بعد وسم إغلاق العنصر صاحب المحدد X، و ذلك بكتابة العنصر صاحب وسم الإغلاق أولاً، ثم علامة الزائد '+'، ثم العنصر الهدف.
نموذج المحدد المركب X~Y
الغرض من هذا النموذج هو إعطاء نفس المظهر بـ CSS لجميع العناصر صاحبة المحدد Y التي توجد بعد وسم إغلاق العنصر صاحب المحدد X، شريطة أن تكون العناصر صاحبة المحدد Y في نفس مستوى العنصر صاحب المحدد X، أي لديهم نفس الحيز، و ذلك بكتابة العنصر صاحب وسم الإغلاق أولا، ثم علامة Tilde '~'، و لكتابة علامة Tilde، فاختصار لوحة المفاتيح الخاص بها هو ALT+126 (يمكن الإستعانة بهذه الصفحة من أجل كتابة الأحرف الخاصة Special Characters) ، بعد كتابة علامة Tilde في المحدد المركب، يجب كتابة العناصر الهدف.
الفيديو التوضيحي للدرس
محددات Attribute
محددات Attribute و المعروفة إنجليزياً بـ Attribute Selectors هي محددات تعطي المظهر بـ CSS للعناصر التي تحتوي على Attribute المحددة فيها، و تنقسم إلى خمس نماذج حيث كل نموذج يتوفر على الشروط اللازمة لتحديد العنصر بهدف إعطاء لهذا الأخير المظهر، مع الأخذ بعين الإعتبار عدم إنشاء فراغات عند كتابة كامل النموذج في تنسيق كود CSS.
النموذج [X[attribute
الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket ' [] ' في النموذج.
النموذج [""=X[attribute
الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها تتوفر على القيمة المكتوبة داخل Double Cotations ' "" ' في النموذج.
النموذج [""=*X[attribute
الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها يتوفر جزء من قيمتها على ما كُتب داخل Double Cotations في النموذج.
النموذج [""=^X[attribute
الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها تتوفر بداية قيمتها على ما كُتب داخل Double Cotations في النموذج.
النموذج [""=$X[attribute
الغرض من هذا النموذج هو إعطاء المظهر بـ CSS لجميع العناصر صاحبة المحدد X، شريطة أن تتوفر على إسم الـ Attribute الذي داخل قوسي Bracket في النموذج، و التي بدورها تتوفر نهاية قيمتها على ما كُتب داخل Double Cotations في النموذج.
يمكن الإستغناء على X في جميع نماذج محددات Attribute حيث سيتم استهداف جميع عناصر الـ HTML التي تتوفر على شروط ما بداخل أقواس Bracket
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس