هلّا تشرح لنا ما هو الفرق بين ال id و class ؟ وما هو الأستخدام الأمثل لهما؟
- راتب الحسين
- 2015-01-02T21:32:14+00:00
في الحياة ..
الـ 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 معقد قليلا ولن تحتاج له كونك مبتدأ، لذا إن لم تفهم شيئا مما ذركته فوق فلا مشكلة إطلاقا. لكنك مع الوقت ستفرق في الأوليات
هناك العديد من الدراسات التي أقيمت في الانترنت، هذه أقرب واحدة بدت لي منطقية
هناك من رتبهم على الشكل التالي
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
فضلاً لا إمراً
وبما أنّنا خضنا في الموضوع وما هو الأستخدام الصحيح ل div
لأن موقع لم يشرحها أو بالأحرى لم أفهم طريقة الشرح w3schools
حقيقةً انصحك ان تتابع تعليمك, وتعلم باقي ال 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 وتعني معكوس الألوان وكبير وأيقونة تحتوي على أيقونة الحفظ.
لكن لا يجوز منح اكثر من معرف للعنصر الواحد.
مجتمع مختص في تصميم المواقع، وتوفير مساعدات وإجابة للأسئلة حول هذه اللغة