تفصيل مزيجات الاختيار id CSS

تسمح ميزة اختيار ID بتخصيص النمط بشكل مستقل عن عناصر المستند.

ميزة اختيار ID CSS

في بعض الأوجه، تشبه ميزة اختيار ID ميزة اختيار الكلاسات، ولكن هناك تفاوتات مهمة.

النحو

أولاً، ميزة اختيار ID تشمل رمز # - يُسمى أيضًا رمز الشطرنج أو رمز الـ井.

انظر إلى القاعدة التالية:

*#intro {font-weight:bold;}

مثل ميزة اختيار الكلاسات، يمكن تجاهل ميزة اختيار النجمة في ميزة اختيار ID. يمكن كتابة المثال السابق أيضًا كالتالي:

#intro {font-weight:bold;}

النتيجة ستكون نفسها.

الفرق الثاني هو أن ميزة اختيار ID لا تشير إلى قيمة خاصية class، بلا شك، إنها تشير إلى قيمة خاصية id.

إليك مثال حقيقي على ميزة اختيار ID:

<p id="intro">هذا هو فقرة تقديم.</p>

تجربة شخصية

ميزة اختيار الكلاسات أو ميزة اختيار ID؟

في هذا الفصل من ميزة اختيار الكلاسات، قمنا بشرح كيفية تعيين ميزة اختيار الكلاسات لعدة عناصر. في الفصل السابق، تم تطبيق اسم الكلاس important على عناصر p و h1، وهي يمكن تطبيقها على عناصر أخرى أيضًا.

التفاوت 1: يمكن استخدامها مرة واحدة فقط في المستند

مختلف عن الكلاسات، في مستند HTML، يتم استخدام ميزة اختيار ID مرة واحدة فقط، ومن ثم فقط.

التفاوت 2: لا يمكن استخدام قائمة كلمات ID

على عكس ميزة اختيار الكلاسات، لا يمكن استخدام ميزة اختيار ID بشكل متكامل، لأن خاصية ID لا تسمح بمجموعات كلمات منفصلة بالمسافات.

التفاوت 3: يمكن أن يحتوي ID على معاني أكثر

مثل الكلاسات، يمكن اختيار ID بشكل مستقل عن العناصر. في بعض الحالات، تعلم أن هناك قيمة ID محددة ستظهر في المستند، ولكن لا تعلم أنها ستظهر في أي عنصر معين، لذا تريد إعلان ميزة اختيار ID مستقلة. على سبيل المثال، قد تعلم أن هناك عنصرًا له قيمة ID هي mostImportant في المستند المحدد. لا تعلم أن هذا العنصر الأهم هو جملة أو عبارات أو عنصر قائمة أو عنوان فرعي. تعلم فقط أن كل مستند يحتوي على محتوى مهم، قد يكون في أي عنصر، ويمكن أن يظهر مرة واحدة فقط. في هذه الحالة، يمكنك كتابة القاعدة التالية:

#mostImportant {color:red; background:yellow;}

هذا القانون سيقوم بالتوافق مع العناصر التالية (لا يمكن أن تظهر هذه العناصر في نفس المستند، لأنها جميعها تحتوي على نفس قيمة ID):

<h1 id="mostImportant"!هذا مهم!
<em id="mostImportant"!هذا مهم!
<ul id="mostImportant">هذا مهم! <ul>

جرب بنفسك:

التعريف بالحروف الكبيرة والصغيرة

لاحظ أن مزيجات الاختيار الفئة والـ id قد تكون معرفية بالحروف الكبيرة والصغيرة. هذا يعتمد على لغة المستند. يتم تعريف القيم الفئة والـ id في HTML وXHTML على أنها معرفية بالحروف الكبيرة والصغيرة، لذا يجب أن تكون قيم الفئة والـ id متطابقة مع القيم الموجودة في المستند.

لذلك، بالنسبة للCSS وHTML التالية، لن يصبح العنصر سميكًا:

#intro {font-weight:bold;}
<p id="Intro">هذا هو فقرة تقديم.</p>

بسبب اختلاف حجم الحرف i الكبير والصغير، لن يتم تطابق المزيجات مع العناصر العليا.