لمطورى الويب | الفرق بين ال Id وال Class

كمطور ومصمم ويب، لا تستغنى بشكل يومى عن إستخدام ال id وال class داخل صفحات الموقع او المشروع الذى تعمل عليه. حيث نستخدمهم لتطبيق تنسيقات معينه بلغة ال CSS او JavaScript .
وقد قمنا فى الدرس السادس من دورة ال HTML بشرح كيفية التعامل مع العناصر من خلال ال id وال Class بالتفصيل.
لكن لابد أن تعرف ان هناك فروق جوهريه فى أستخدام (id) او (Class) للعنصر ، وما الذى يجعلنا نفضل استخدام ال (id) مره و (Class) مه أخرى .

• الفرق الاساسى 

الفرق الجوهرى والاساسى بين ال (id) وال (Class) هو أنه عندما تستخدم (id) للعنصر فستقوم بإستدعائه داخل تنسيقات ال CSS مبسوقا بعلامة الهاش (#) ،

أما إذا قمت بإعطاء العنصر (class) فستقوم بإستدعائه داخل تنسيقات ال css مسبوقا بعلامة النقطه (.) . 

• التعدديه 

يمكنك إضافة أكثر من class الى العنصر ، بينما لا يمكنك إضافة أكتر من id له . 

إذا كنا نريد تطبيق مجموعتين من التنسيقات وكل مجموعه موجوده فى class معين، ونريد تطبيق تلك المجموعتين من التنسيقات على عنصر معين، ولنفترض ان الكلاس الاول اسمه class1. ، والثانى class2. .

كل ما عليك هو إعطاء هذا العنصر هذين الكلاسين مفصولين بمسافه كما هو موضح أدناه. 

لكن غير ممكن وغير مسموح بإعطاء أكثر من id لعنصر واحد ، حيث سوف يتم تطبيق التنسيقات الموجوده فى ال id الاول فقط.

• الانتقال الى أعلى وأسفل الصفحه 

يمكن إستخدام معرف ال id لعمل زر الانتقال الى أعلى والى أسفل الصفحه، ويعتبر هذا من أشهر أستخدامات ال id داخل صفحات الويب، 

وقد قمنا بالتفصيل بشرح كيفية عمل لينكات الانتقال الى أعلى وأسفل الصفحه فى الدرس (11) من دروة ال HTML . 

• يمكنك الجمع بينهما 

بالتأكيد يمكننا أن نعطى عنصر ما id و Class فى نفس الوقت وسوف يتم تطبيق التنسيقات الموجوه فى كل منهما على العنصر ، لاحظ الكود التالى ▼ 

• أحيانا ال id هو الخيار الأمثل 

إذا كانت لديك خلفيه عن لغة الجافاسكريبت، فبالتأكيد أنت تعرف أن استخدام ال id للعناصر هو الخيار الأمثل عند تطبيق تنسيقات عليها بلغة الجافا اسكريبت،

وهذه هى الحاله الوحيده التى لا يمكن إستخدام class فيها علا الاطلاق.

• تويتر
• فيسبوك
• جوجل+
• لينكد إن
• واتس آب

مواضيع ذات صلة