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

Rateb Alhussen

التعليقات

13
mabdallah

في الحياة ..

الـ 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 لأنها تتحدث عن البرمجة ..

وهكذا ..

4
حينَّ يصبح التفكير كالخط المستقيم ، يموت العقل

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

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

1
Rateb Alhussen

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

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

5
mabdallah

أهلاً راتب،

مفهوم الـ 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]

0
Rateb Alhussen

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

2
Mohamed Bin Othman

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

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

2
نذير صغير

إضافة إلى ما قاله الجميع من قبل، لا تستعمل 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 معقد قليلا ولن تحتاج له كونك مبتدأ، لذا إن لم تفهم شيئا مما ذركته فوق فلا مشكلة إطلاقا. لكنك مع الوقت ستفرق في الأوليات

1
حينَّ يصبح التفكير كالخط المستقيم ، يموت العقل

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

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

2
نذير صغير

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

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

1

10

100

1000

10000

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

1

5

10

...

255

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

1
يوسف سيد

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

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

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

مثلا 

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

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

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

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

0
Rateb Alhussen

مرحبا wgh

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

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

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

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

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

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

3
وليد غريب

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

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

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

1
Rateb Alhussen

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

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

0
وليد غريب

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

0
Wgh Wgh

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

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

0
Rateb Alhussen

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

1
عبدالله خشبة

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

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

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

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

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

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

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

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

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

0
عبدالمجيد المخلفي

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

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

بالتوفيق

0
مؤيد السعدي

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

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

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


اقرأ أيضًا

CSS

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

1.27 ألف متابع