السلام عليكم، سنرى في هذا الدرس أنواع Selectors في CSS، و المعروفة في اللغة العربية بالمحدِّدات.
هناك 8 أنواع محددات في CSS :
* محدد العنصر -------------- Element Type Selector
* محدد ID Selector ------------------ ID
* محدد CLASS Selector -------------- CLASS
* المحدد الشامل ------------ Universal Selector
* المحددات المركبة --------- Combinators
* محدد Attribut Selector ------------- Attribut
* Pseudo-Class
* Pseudo-Element
سنتطرق في هذا الدرس إلى محدد العنصر، محدد ID، محدد CLASS و المحدد الشامل حيث يعتبرون كمحدِّدات بسيطة و أكثر تداولاً من طرف مصممو الويب، أما الباقي فسنراه في دروس مخصصة في الدروس المتقدمة من هذه الدورة.
Element Type Selector
محدد العنصر أو ما يصطلح عليه باللغة الإنجليزية Element Type Selector هو محدد يأمر متصفحات الإنترنت بتغيير مظهر عناصر HTML كـ P أو H1 أو IMG... و يكتب في تنسيق كود CSS بصفة إسم العنصر HTML المراد تغيير مظهره، مثلاً إذا كان المحدد في تنسيق كود CSS هو P، فإنه من نوع Element Type Selector أي محدد العنصر، و بالتالي فإن جميع الفقرات النصية في ملف HTML سيتم تغيير مظهرها.
ID Selector
محدد ID أو ما يصطلح عليه باللغة الإنجليزية ID Selector هو محدد يأمر متصفحات الإنترنت بتغيير مظهر العنصر الذي يحتوي على Attribut تسمى 'ID'، بحيث أن هذه الأخيرة تقحم في أغلب عناصر HTML، و بقيم اختيارية حيث هذه القيم هي التي تقحم كمحددات في تنسيقات أكواد CSS مرفوقة بعلامة Sharp (#) في أولها.
يصلح هذا المحدد لتغيير مظهر عنصر أو عناصر معينة عن سائر العناصر المشابهة لها، مثلأ نريد أن نغير مظهر عنوان رئيسي، ما علينا إلا إضافة الـID Attribut في عنصر إقحامه بملف HTML، ثم تخصيص للـID قيمة من اختيارنا متجنبين الفراغات في القيمة، ثم في ملف CSS نكتب علامة Sharp و بعدها مباشرة قيمة الـID Attribut التي خصصناها مكونين محدد ID، ثم إكمال تنسيق كود CSS.
يعطي HTML الأولوية للمحدد ID في حالة تواجد محدد العنصر و محدد ID لنفس العنصر في ملف CSS.
CLASS Selector
محدد CLASS أو ما يصطلح عليه باللغة الإنجليزية CLASS Selector هو محدد يأمر متصفحات الإنترنت بتغيير مظهر العنصر الذي يحتوي على Attribut تسمى 'CLASS'، بحيث أن هذه الأخيرة تقحم في أغلب عناصر HTML، و بقيم اختيارية حيث هذه القيم هي التي تقحم كمحددات في تنسيقات أكواد CSS مرفوقة بنقطة (.) في أولها.
يصلح هذا المحدد لتغيير مظهر عنصر أو عناصر معينة عن سائر عناصرHTML، مثلأ نريد أن نغير مظهر فقرة نصية، ما علينا إلا إضافة الـCLASS Attribut في عنصر المسؤول عن إقحامها بملف HTML، ثم تخصيص للـCLASS قيمة من اختيارنا متجنبين الفراغات في القيمة أيضاً، ثم في ملف CSS نكتب نقطة و بعدها مباشرة قيمة الـCLASS Attribut التي خصصناها مكونين محدد CLASS، ثم إكمال تنسيق كود CSS.
يعطي HTML الأولوية للمحدد ID في حالة تواجد محدد CLASS و محدد ID لنفس العنصر في ملف CSS.
الفرق ما بين ID Attribut و CLASS Attribut هو أن الـID Attribut تصنَّف كـ Identifier أي معرِّف، و بالتالي لا يجب على عنصر HTML أن يحتوي على أكثر من ID واحد، زيادة على أن هذا العنصر يجب عليه أن يكون وحيداً في صفحة HTML، يعني لا يوجد عنصر آخر لديه نفس قيمة الـID في نفس الصفحة، أما الـCLASS Attribut فتصنَّف كـ Classifier أي مصنِّف، و بالتالي يمكن لـCLASS واحد أن يتواجد في عدة عناصر HTML، و يمكن لعدة CLASS أن تتواجد في نفس العنصر HTML.
الفيديو التوضيحي للدرس
Universal Selector
المحدد الشامل أو ما يصطلح عليه باللغة الإنجليزية Universal Selector هو محدد يأمر متصفحات الإنترنت بتغيير مظهر كامل صفحة الويب أو تطبيق الهاتف، لهذا سمِّي بالمحدد الشامل، أي أن الخواص التي يحتويها كوده و قيمها تطبَّق على كامل صفحة الويب أو تطبيق الهاتف، و يعبَّر عنه في ملف CSS بعلامة النجمة (*).
بالنسبة لأولوية HTML، فهذا الأخير لا يعطي للمحدد الشامل الأولوية نسبة لجميع أنواع المحددات الأخرى.
الأكواد المستعملة في هذا الدرس
أتمنى أن تستفيدوا من الدرس