هلّا تشرح لنا ما هو الفرق بين ال id و class ؟ وما هو الأستخدام الأمثل لهما؟


التعليقات

13

في الحياة ..

الـ id ككلمة إنجليزية تعني الهويّة التي تُعرّف من خلالها على شيء فريد .. فمثلا لكل شخص رقم وطني (National ID) خاص به .. لا يشترك به مع أحد آخر ..

أما الـ Class، فهي تعني صنْف أو فئة .. وتضم مجموعة من العناصر الذين يندرجون تحت صنف معين ..

مثلاً: مجموعة من الأفراد لكل واحد منهم رقم وطنيّ خاص به (ID) .. وجميعهم مشتركون مثلاً في أن لون بشرتهم بيضاء ..


كذلك الحال في البرمجة ..

لو كنت تبرمج مدونة مثلاً، تحتوي على مجموعة من المقالات، فلكلّ مقال id خاص به .. وجميع المقالات تشترك في كونها مقالة، فنضع لها Class باسم post مثلاً .. وماذا لو أن جزء من هذه المقالات تشترك في كونها مقالات تتحدث عن البرمجة .. فلنضع لها Class باسم format-programming ..

الآن ..

  • لو أردت الوصول إلى مقالة معينة من خلال Javascript ، ستستخدم الـ id الخاص بها ..

  • ولو أردت أن تغيّر Style المقالات جميعها من خلال الـ CSS ، ستستخدم الـ Class الذي أسميناه post .. لأن جميع المقالات تندرج تحت هذا الـ Class ..

  • ولو أردت أن تغيّر Style المقالات التي تتحدث عن البرمجة فقط .. ستستخدم الـ Class الذي أسميناه format-programming .. علماً أن المقالة البرمجية ستحتوي على الـ Class المسمّى post لكونها مقالة .. بالإضافة الى الـ class المسمى format-programming لأنها تتحدث عن البرمجة ..

وهكذا ..

مثلاً: مجموعة من الأفراد لكل واحد منهم رقم وطنيّ خاص به (ID) .. وجميعهم مشتركون مثلاً في أن لون بشرتهم بيضاء ..

يمكن القول بشكل أعم ، أن لكل مواطن في العالم رقم وطني خاص به (ID) ، ولكل دولة (Class) يشمل جميع المواطنين الذي يشتركون بنفس الجنسية الواحدة وهي تمثل الـ (Class) .

في هذا المثال لم يستخدم ال id بل أستخدام الكلاس لعنصر واحد في كود واحد ولم يجمع عدة عناصر

هل من سبب لهذا الأمر، لأنني أظن بأن الاستخدام الأفضل عبر ال id

أهلاً راتب،

مفهوم الـ id والـ class (لن) يتضح معك إلا إذا قمت بعمل مشروع كامل متكامل، عندها سوف تعرف أنك الآن بحاجة إلى class، وأنك بحالة أخرى بحاجة إلى id ..


في هذا المثال الذي أدرجته أنت، افترض أن الكود الموجود عندك هو عباارة عن مقالة .. وسأقوم بإضافة وسم حوله، يحتوي هذه الوسم على id خاص بكل مقاله، وعلى class يجمعهم جميعهم

<div id='1' class='post'>
  <h1>This is heading 1</h1>
  <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
  <p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</div>

وافترض أن عندك العديد من المقالات في نفس الموقع، كهذه:

<div id='2' class='post'>
  <h1>This is heading 2</h1>
  <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
  <p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</div>

وهذه أيضاً:

 <div id='3' class='post'>
  <h1>This is heading 3</h1>
  <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
  <p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</div>

لاحظ الآن أن تكرار المقالات يحتاج منك أن تستخدم Class المسمّى ex وذلك لتكراره أكثر من مرة ، وهذا كان في الواقع عندما قمت ببناء مشروع حقيقي تطلب منك تكرار المقالات، لا في مثال يقتصر على ذاته ..


عموماً، لا تقلق نفسك كثيراً بمسألة الـ class والـ id .. ولا حتى بمسائل أخرى اختلط عليك فهمها .. وذلك لأن الوسيلة الأنجح في تعلم البرمجة هي في عمل مشاريع كاملة،

خذ نظرة عامة على الـ CSS و الـ HTML ، ومن ثم قم ببناء مشروع وأسْقط عليه كل معلومة جديدة تواجهك ..

لا يشترط بك أن تبيع هذا المشروع بعد إنهائه! ولا أن تستفيد منه أنت، بل ابنهِ بغرض التعلّم فقط .. ولا تخش الخطأ .. بل اخطئ، وغامر، وجرّب .. ومن ثم تعلم ..


اذا كانت لغتك الإنجليزية جيدة، ولا بد أن تكون :)، أنصحك بكورس 30Days to Learn HTML and CSS .. شاهده حتى لو لم تفهم الكثير .. [1]

وحاول دائماً أن تتبع الكورسات أو الدروس التي تنتهي بك إلى بناء مشروع كامل،

وبالتوفيق،


[1]

هذا ما كنتُ أحتاجه ...شكراً محمد عبدالله

اذا كان العنصر لن يتكرر في الصفحة اكثر من تسنده بـ ID ، واذا كان العنصر يمكن ان يتم استخدامه اكثر من مره في الصفحة ضعه في Class.

مثال على عنصر يوجد مره واحده في الصفحة هو الفوتر Footer او الهيدر فهذه العناصر توجد مره واحده في الصفحة، اما اذا كان العنصر مثلا تبويب جانبي ففي الغالب التبويبات تكون متشابهه في الشكل وتختلف في المحتوى لذلك التبويب ممكن تضعه في Class.

إضافة إلى ما قاله الجميع من قبل، لا تستعمل ID في CSS إطلاقا

السبب بسيط ولكنه يبدو سخيفا إلى أن يكبر مشروعك وتدخل في أمور أكثر، وتحاول التعديل لاحقا أو إعادة استخدام الكود

ببساطة أنت لا تستطيع تجاوز (over-read) إستعلامات تم القيام بها عبر ID لاحقا. لنضرب مثالين

لنلق صندوق يحتوي على كتابة بخلفية خضراء وانت استخدمت ID لتقوم ب style الخاص به

#box {
    color: white;
    background-color: green;
}

الآن لاحقا في الصفحة لنقل أنك أردت تغيير الخلفية عبر JS لسبب ما، ستقوم عبر JS بإضافة class إلى العنصر هكذا مثلا

.red-box {
    background-color: red;
}

الآن أنت ما قمت به لن ينجح إطلاقا لأن كل style الموجود تحت ID يملك أولوية على class بالتحديد أولوية class هي 10 بينما اولوية ID هي 255

أما إذا استخدم class في البداية فستنجح بما تقوم به

موضوع الأولويات في css معقد قليلا ولن تحتاج له كونك مبتدأ، لذا إن لم تفهم شيئا مما ذركته فوق فلا مشكلة إطلاقا. لكنك مع الوقت ستفرق في الأوليات

بالتحديد أولوية class هي 10 بينما اولوية ID هي 255

هل الأرقام لضرب المثل ، أم أن هناك مقياس من 0 لـ 255 للأولوية ؟

هناك العديد من الدراسات التي أقيمت في الانترنت، هذه أقرب واحدة بدت لي منطقية

هناك من رتبهم على الشكل التالي

1

10

100

1000

10000

وهنا من رتبهم على الشكل

1

5

10

...

255

وهكذا، ابحث عن الأوليات في css لتحصل على معلومات أكثر

يمكن استخدام !important

.red-box {
    background-color: red !important
}

استخدم id في حال كنت ترغب بلوصول الى هذا العنصر وحده من خلال جافا سكربت او css ..

مثلا

$('#clickBtn').click(alert(1));

استخدم class لاي شيئ اخر تريد القيام به, كلتصميم ب css او عمل loop على عناصر من نوع معين .. مثلاً

$('.btn').each(function() {....});

هذه فلسفتي البسيطة.

مرحبا wgh

أنا لا زلت مبتدأ في html & css أنني أتعلم من موقع w3schools ولغتي الأنكليزية سيئة بعض الشيء

وما فهمت من الموقع بأن ال id تستخدم للدلالة لعنصر بعينه

أما الكلاس فتستطيع أن تجمع عدة عناصر مختلفة بكلاس واحد

هذا ما فهمته منهم

ولكن هل تستيطع أن تبسط لي الأمر أكثر بمثال آخر وأربطه ب css

فضلاً لا إمراً

أبسط ما أستطيع:

لنفترض أنك تريد أن تقوم بعمل تأثير على عنصر واحد، هنا تستخدم id

إذا كنت تريد أن تقوم بعمل تأثير على عدة عناصر، تستخدم class

وبما أنّنا خضنا في الموضوع وما هو الأستخدام الصحيح ل div

لأن موقع لم يشرحها أو بالأحرى لم أفهم طريقة الشرح w3schools

اممم، div لتقسيم الموقع (أو الصفحة) مثلا ننشئ div لقسم التعليقات ثم ونضع عناصر هذا القسم داخل div هذه.

حقيقةً انصحك ان تتابع تعليمك, وتعلم باقي ال Tags وباقي خصائص ال Css, وايضاً تعلم Javascript, ثم قم بعمل مشروع بسيط, بعد ذلك ستجد انك بدأت تفهم الامور على حقيقتها, ومتى نستخدم كذا ومتى نستخدم كذا ..

اما ان تقوم بلتدقيق على الامور منذ البداية, ومحاولة فهم كل شاردة وواردة يجلك تمل, وتحيد عن هفك الاساسي.

وهذا ما سأفعله حقاً

تخيل أن لديك class اسمه سيارة

و لديك 30 سيارة .. لكل رقم لوحة مختلف (ID)

و تخيل أن كل هذه السيارات فى المصنع الآن و سيتم إجراء تعديلات عليها مثلاً

يقول المهندس أريد تعديل أى عنصر من class (سياره) و دهانها بلون اسود

و يقول مهندس آخر .. أريد تعديل الـ (سيارة) ذات ال Id بقيمة ( 234س ) إلى اللون الأحمر

فالكلاس هو الفصيل ويمكن تكراره لأكثر من عنصر لأنه ممكن ينتمى أكثر من عنصر لنفس الفصيل و ال ID هو الرقم المحدد للعنصر ولا يجب أن يكون فى نفس الصفحة عنصران بنفس قيمة ال ID نهائياً .

و مثال ال Class و ID هو مثال النكرة و المعرفة فى اللغة

فأنت تقول .. سيارة .. أى لم تحدد السيارة

و تقول .. السيارة رقم 232 ... أى حددت واحده فقط

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

class تستطيع التعامل مع أكثر من عنصر مثلاً btn تتعامل مع 20 زر في الصفحة ، أو box تتعامل مع عشرين عنصر اسم الكلاس تبعها box

بالتوفيق

المعرف الفريد id للأشياء الفريدة التي يوجد منها عنصر واحد مثل الشريط العلوي. في حين الفئة يوجد منها اكثر من عنصر كالزر.

كذلك يجوز منح اكثر من فئة على العنصر الواحد مثلا inverse big icon icon-save وتعني معكوس الألوان وكبير وأيقونة تحتوي على أيقونة الحفظ.

لكن لا يجوز منح اكثر من معرف للعنصر الواحد.


CSS

مجتمع مختص في تصميم المواقع، وتوفير مساعدات وإجابة للأسئلة حول هذه اللغة

1.3 ألف متابع