freeCodeCamp/guide/arabic/css/tutorials/a-guide-to-class-and-id-selectors/index.md

---
title: A Guide to Class and Id Selectors
localeTitle: دليل لمتخصصي الصف واختياري
---
## دليل لمتخصصي الصف واختياري

هذه مقالة تستند إلى محددات CSS. يستخدم CSS لتصميم عناصر HTML وصفحة الويب بشكل عام. لكي يقوم CSS بنمط عنصر على الصفحة ، يجب تحديد هذا العنصر أولاً.

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

على الرغم من أن CSS يمكنها تحديد عناصر بشكل جيد للغاية ، يمكنك توجيهها لتحديد عناصر محددة جدًا. بنهاية هذه المقالة ، سوف تخرج مع المعرفة لتحديد عناصر محددة وأسلوبها.

### ما هو الفصل والمعرف؟

لنفترض أن لديك 5 عناصر في شفرة HTML.

 `
<p> First paragraph </p> 
 <p> Second paragraph </p> 
 <p> Third paragraph </p> 
 <p> Fourth paragraph </p> 
 <p> Fifth paragraph </p> 
` 

يمكنك إعطاء كل منهم لون خط أحمر باستخدام CSS.

 `p { 
    color: red; 
 } 
` 

هذا سهل جدا! ولكن ماذا لو كنت تريد فقط إعطاء الفقرة الثانية لون الخط؟ هذا صعب بعض الشيء في الوقت الحالي. نظرًا لعدم وجود طريقة لتعريف كل عنصر من عناصر الفقرة بشكل فردي ، لا يمكننا تحديدها بشكل منفصل.

_فئة وهوية للانقاذ_

يتصرف التصنيف والهوية مثل بطاقات الهوية لعناصر HTML. كلاهما يساعد في فصل عنصر واحد عن آخر لكنه مختلف بعض الشيء.

* * *

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

إذا كان هناك 3 أندية - A و B و C. ثم سيكون لجميع أعضاء النادي A نفس بطاقات الهوية. جميع أعضاء نادي B سيكون لديهم نفس اللاعبين ، على الرغم من أنهم سيكونون مختلفين عن بطاقات هوية النادي A و Club C. هذه هي الطريقة التي تعرف بها من هو النادي.

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

 `
<p class="bike"> Hayabusa </p> 
 <p class="car"> Chevrolet </p> 
 <p class="bike"> Hayley-Davidson </p> 
 <p class="car"> Lamborghini </p> 
` 

هنا لدينا 4 فقرات. إذا نظرت إلى أسماء الفصل ، فهناك "ناديان". الآن يمكننا اختيار النادي (أو المجموعة) التي نريدها وتطبيق الأنماط التي نريدها عليهم.

 `.bike { 
    color: blue; 
 } 
` 

يمكنك تحديد مجموعة بدلاً من عنصر معين عن طريق التمهيد المسبق لاسم المجموعة بنقطة `.` وتطبيق الأنماط التي تريدها لتلك المجموعة. في هذا المثال ، يتم تطبيق لون الخط الأزرق فقط على الفقرات التي تحتوي على فئة `bike` .

* * *

إذا فهمت `class` ، فسيكون من السهل فهم الهوية.

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

هذا هو معرف. تماما مثل بطاقات الهوية الشخصية ، يمكن أن يكون عنصر HTML واحد فقط `id` معين. لا عناصر لهما نفس `id` .

 `
<p id="car"> Ferrari </p> 
 <p id="car"> Ford </p> 
 <!-- This is incorrect--> 
 
 <p id="harley"> Harley-Davidson </p> 
 <p id="hayabusa"> Hayabusa </p> 
 <!--This is correct since an id is only used once.--> 
` 

يمكن أن يكون `id` أيضًا مشابهًا للمفتاح الخاص لخزانة الخزانة في النادي. كل شخص في النادي لديه نفس بطاقة الهوية الخاصة بالنادي ، لكن مفتاح خزانة كل شخص مختلف وفريد.

على غرار مثال `class` ، يمكنك تحديد عنصر معين وتطبيق الأنماط عليه من خلال تحديد اسم معرف مسبق بـ `#` .

 `#hayabusa { 
    font-style: bold; 
 } 
` 

* * *

من السهل تذكر - الاستخدام `.` قبل اسم _الفئة_ و `#` قبل اسم _معرف_ .

كلاهما لها استخداماتها الخاصة.

> يتم استخدام الفئة عند تطبيق الأنماط على عناصر متعددة ويتم استخدام المعرف عند تطبيق الأنماط على عنصر معين.

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

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