فكرة المعرّف الفريد أو ID تشبه تماماً فكرة الفئات classes إلا أن هناك فرقاً مهماً بينهما فالفئات تستخدم مع عناصر مختلفة ومن أنواع مختلفة , مثلاً :
كما رأيت استخدمنا الفئة مع عناصر من انواع مختلفة وهي p و h2 و h6 .
أما المعرّف الفريد id فلا يستخدم إلا مع عنصر واحد فقط , يعني أن لكل عنصر id خاص به , ولاستخدام الـ id نستخدم الرمز # (ويلفظ : هاش) ثم نكتب اسم الـ id الذي نريد :
أيضاً له فائدة في لغات برمجة الويب مثل جافاسكريبت و php و غيرها , وفائدته أنه يمكنك من الربط بين العنصر ولغة البرمجة , ويجعلك تتحكم بخواص وقيم العناصر عن طريق لغة البرمجة مثلاً ان تقوم بتغيير ارتفاع العنصر او لونه عن طريق ريط لغة البرمجة مع خواص CSS للعنصر .
p.redClass { color: Red; }
h2.redClass { color: Red; }
h6.redClass { color: Red; }
كما رأيت استخدمنا الفئة مع عناصر من انواع مختلفة وهي p و h2 و h6 .
أما المعرّف الفريد id فلا يستخدم إلا مع عنصر واحد فقط , يعني أن لكل عنصر id خاص به , ولاستخدام الـ id نستخدم الرمز # (ويلفظ : هاش) ثم نكتب اسم الـ id الذي نريد :
#header
{
background-color: Blue;
}
ولإستدعاءه في عناصر HTML نستخدم الخاصية id :
<div id="header"> ... </div>
انظر لهذا المثال :
<html>
<head>
<style>
#id1 { color: Red;
}
#id2 { color: Green;
}
#id3 { color: Blue;
}
</style>
</head>
<body>
<h1 id="id1">Red
ID</h1>
<h3 id="id2">Green
ID<h3>
<p id="id3">Blue
ID</p>
</body>
</html>
والنتيجـــــة كالتالي :
وهل هناك فائدة من الـ id ؟
بالتأكيد هناك فائدة كبيرة فأولها انه يمكنك من تمييز بعض العناصر واعطاءها خواص لها وحدها .أيضاً له فائدة في لغات برمجة الويب مثل جافاسكريبت و php و غيرها , وفائدته أنه يمكنك من الربط بين العنصر ولغة البرمجة , ويجعلك تتحكم بخواص وقيم العناصر عن طريق لغة البرمجة مثلاً ان تقوم بتغيير ارتفاع العنصر او لونه عن طريق ريط لغة البرمجة مع خواص CSS للعنصر .