محدّد الفئة
محدّد الفئة
محدّد الفئة درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.
Why Use Class Selectors
مرحبًا،
لقد وصلنا إلى محددات الفئات، وهي من أهم الموضوعات في CSS.
نحن نعرف محدد الفئة لأننا استخدمناه كثيرًا حتى الآن.
في هذا الدرس، سنرسّخ معًا معارفنا ونتعرّف إلى مزاياه مقارنةً بالمحددات الأخرى.
بنية محدد الفئة
لنبدأ إذن.
نستخدم محدد النقطة (.) لتعريف محدد من نوع الفئة. في ما يلي محدد فئة باسم my-class، وقد أُسنِدت إليه قيمة 10px لخاصية font-size.
.my-class {
font-size: 10px;
}
يمكننا أيضًا تعريف أكثر من نمط واحد لمحدد الفئة.
.my-class {
font-size: 10px;
}
محددات متعددة
يمكننا تعيين أكثر من فئة للعنصر نفسه.
في المثال أدناه، تم تعريف محددي فئة باسمَي el1 وel2.
يمكن إضافة فئتين أو أكثر إلى السمة class للعنصر الذي أُنشئ باستخدام الوسم p، مع ترك مسافة بينها.
يمكنكم ملاحظة أن أنماط الفئتين تنعكس على العنصر في الوقت نفسه في قسم المعاينة.
<style>
.el1{
color:red;
}
.el2{
font-size:30px;
}
</style>
<p class="el1 el2">
Hello Class Selector
</p>لماذا ينبغي أن نختار محدد الفئة بدلاً من محدد الوسم ومحدد المعرّف؟
لماذا ينبغي أن نختار محدد الفئة بدلاً من محدد الوسم ومحدد المعرّف؟
عند استخدام محدد الوسم، قد يؤدي ذلك إلى نتائج غير مرغوب فيها؛ لأنه يؤثر في جميع العناصر المُنشأة باستخدام هذا الوسم. لذلك، نستخدم هذه الوسوم عادةً عندما تكون هناك خاصية مشتركة ينبغي أن تتوفر في جميع العناصر.
على سبيل المثال، إذا أردنا أن تكون عائلة الخط لكل عنصر هي 'Lato' ، فإننا نُنشئ تعريفًا كما يلي.
a{
font-family: Lato,sans-serif
}لماذا ينبغي أن نختار محدد الفئة بدلاً من محدد الوسم ومحدد المعرّف؟ 2
يمكننا إنشاء تعريف خاص بعنصر باستخدام محدد المعرّف.
ولكن بما أن جميع تعريفات الأنماط لدينا صالحة لعنصر واحد فقط، فقد اضطررنا إلى إعادة كتابة التعليمات البرمجية لعنصر آخر أردنا أن نعرض له الخصائص نفسها.
وذلك لأنه لا يمكن أن يوجد في مستند HTML سوى عنصر واحد يحمل المعرّف نفسه.
أولوية CSS
سنتعلم الآن مفهوم أولوية CSS.
لننشئ مشكلة مرة أخرى لفهم الموضوع بشكل أفضل، وسنتعلم هذا المفهوم أثناء حلها.
أولوية CSS 2
في المثال أدناه،
تم إنشاء تعريف نمط للوسم p.
تم إنشاء تعريف نمط باستخدام محدد فئة باسم .first.
اختار كلا المحددين العنصر نفسه في مستند HTML لدينا.
حدّد كلا المحددين أنماطًا تستبدل قيمة الخاصية نفسها، وهي خاصية اللون. في هذه الحالة، سيحدث تعارض.
<style>
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first">
Enroll Now And Start Learn Codding?
</p>
أولوية CSS 3
عند النظر إلى المثال، قد نعتقد، استنادًا إلى معرفتنا السابقة، أن اللون سيكون أحمر.
وذلك لأن مفهوم التتالي يخبرنا بأن التعليمة الموجودة في الموضع الأخير ضمن ترتيب التعليمات البرمجية هي التي ستنتصر.
ولكن هناك تفصيلًا صغيرًا. إذا كانت الأولوية متساوية، تفوز التعليمة البرمجية الأخيرة.
وهي عملية تقييم تُظهر أهمية أولوية المحدد بالنسبة إلى العنصر أو العناصر المعنية.
وبغض النظر عن ترتيبه في التعليمات البرمجية، سيقيّم المتصفح المحدد ذا الأولوية الأعلى.
تحذير
محدد الفئة أكثر تحديدًا من محدد العنصر، ولذلك تكون رتبته من حيث الأولوية أعلى.
أولوية المحددات
إن معرفة أي محدد أكثر تحديدًا أمر بسيط جدًا في الواقع.
بما أن العنصر لا يُسنَد إليه سوى معرّف واحد، ولا يوجد هذا المعرّف إلا مرة واحدة في صفحة الويب، فإننا نتوقع أن يكون محدد الأولوية القصوى.
أما محددات الفئات، فيمكن تقييمها على أنها أكثر تحديدًا من محددات الوسوم؛ لأنها تختار مجموعة أكثر تحديدًا من تلك التي يختارها الوسم.
سنرى في المثال أدناه أن محدد المعرّف يفوز، من خلال تحديد العنصر نفسه باستخدام 3 محددات مختلفة.
<style>
#first{
color:green;
}
.first{
color:blue;
}
p{
color:red;
}
</style>
<p class="first" id="first">
Enroll Now And Start Learn Codding?
</p>أداة حساب أولوية المحددات
يمكنكم الوصول إلى حاسبة أولوية المحددات عبر الإنترنت من هذا الرابط.
متى تكون أولوية المحددات مهمة
إذًا، هل يتعين عليّ استخدام هذه الحسابات طوال الوقت؟
بالطبع لا. لن تحدث تعارضات عندما نكتب التعليمات البرمجية وفقًا للمعايير.
لذلك، لا يتعين عليكم إجراء حسابات رياضية طوال الوقت، ولكن عند حدوث مشكلة، قد تحتاجون إلى هذه المعلومات لحلها.
تهانينا
تهانينا. 🥳🥳🥳
لقد أنهيتم درس محدد الفئة وخصوصية CSS.
في القسم التالي، سنتعلم أنواع المحددات.
يمكنكم النقر للمتابعة إلى القسم التالي.
الأسئلة الشائعة
هل درس «محدّد الفئة» مجاني؟
نعم — نص درس «محدّد الفئة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.
ماذا ستتعلم في «محدّد الفئة»؟
محدّد الفئة تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.
كم من الوقت يستغرق درس «محدّد الفئة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.