مزودات id لـ CSS

اختيار ID

يمكن لاختيار ID تحديد نمط محدد للعناصر التي تحمل ID معين.

يُحدد اختيار ID بـ "#".

في الأسفل، يتم تعريف اختياري ID هذين، الأول يمكنه تعريف لون العنصر كأحمر، والثاني كأخضر:

#red {color:red;}
#green {color:green;}

في الكود HTML المذكور أدناه، يتم عرض العنصر الذي يحمل خاصية id red كأحمر، والعنصر الذي يحمل خاصية id green كأخضر.

<p id="red">هذا الفقرة أحمر.</p>
<p id="green">هذا الفقرة أخضر.</p>

ملاحظة:يمكن استخدام خاصية id مرة واحدة فقط في كل مستند HTML. هل تريد معرفة السبب؟ يرجى الرجوع إلى XHTML: إعادة بناء الموقع.

اختيار ID واختيار فرعي

في التخطيط الحديث، يُستخدم اختيار ID غالبًا لبناء اختيار فرعي.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

النمط المذكور أعلاه سيطبق فقط على الفقرات التي تظهر داخل العنصر الذي يحمل ID sidebar. العنصر المحتمل هو div أو خلية جدول، رغم أنه قد يكون جدولاً آخر أو عنصرًا بلوكًا آخر. يمكن أن يكون أيضًا عنصرًا مدمجًا، مثل <em></em> أو <span></span>، ولكن هذا الاستخدام غير قانوني لأنه لا يمكن وضع <p> داخل عنصر مدمج <span> (إذا كنت قد نسيت السبب، يرجى الرجوع إلى XHTML: إعادة بناء الموقع）。

اختيار واحد، استخدام متعدد

حتى إذا تم تسمية العنصر بـ sidebar يمكن أن يظهر مرة واحدة فقط في المستند، يمكن استخدام هذا اختيار ID كاختيار فرعي يمكن استخدامه عدة مرات:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

في هذا السياق، يتم معالجة عناصر p داخل sidebar بشكل واضح مختلف عن العناصر p الأخرى في الصفحة، وكذلك يتم معالجة عناصر h2 داخل sidebar بشكل مختلف عن جميع العناصر h2 الأخرى في الصفحة.

المزود بشكل منفرد

يمكن للمزود id أن يعمل بشكل مستقل حتى لو لم يستخدم لإنشاء مزودات مشتقة:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

وفقاً لهذا القانون، العنصر الذي يحمل id 'sidebar' سيكون له حافة نقاط سوداء بعرض بكسل واحد، وسيكون لديه سحوبات داخلية بعرض 10 بكسل (padding، مساحة داخلية). قد يغيب هذا القانون في إصدارات Windows/IE القديمة، إلا إذا قمت بتحديد العنصر الذي ينتمي إليه هذا المزود:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

المحتوى المتعلق

إذا كنت بحاجة إلى تعلم المزيد عن مزودات id، يرجى قراءة دروس CodeW3C.com المتقدمة:تفصيل المزودات id لـ CSS.