CSS/ID Selectors

مُحدِّد المُعرِّف (ID selector) في CSS يُطابِق العناصر وفق قيمة الخاصية ID التابعة لها.

لاحظ أنَّه يجب أن يُطابِق هذه المُحدِّد قيمة الخاصية id تمامًا، كما في المُحدِّد الآتي الذي سيُحدِّد العنصر الذي له المُعرِّف demo:

#demo {
  border: red 2px solid;
}

ويمكن تحديد العنصر الذي يكون له قيمة معيّنة للخاصية id وله نوع معيّن، مثل تحديد عنصر <div> التي تكون قيمة الخاصية id فيه هي demo:

div#demo {
  border: red 2px solid;
}

لاحظ أنَّ معيار HTML5 يقول أنَّ قيمة الخاصية id يجب أن تكون فريدةً لكل عنصر في المستند، ولا يجوز تكرارها أبدًا، لكن المتصفحات ستُطبِّق قواعد CSS الموجودة ضمن هذا النوع من المُحدِّدات على جميع عناصر HTML التي لها نفس المُعرِّف. الشكل العام لهذا المحدد:

#id_value { style properties }

لاحظ أنَّ هذا المُحدِّد يماثل مُحدِّد الخاصيات الآتي:

[id=id_value] { style properties }

أمثلة

يمكننا أن نلاحظ في المثال التالي أنَّ عنصر <div> في المستند الذي له المُعرِّف identified سيكون بلونٍ أزرق (skyblue):

div#identified {
  background-color: skyblue;
}

شيفرة HTML:

<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	مدعومة	مدعومة	مدعومة	مدعومة	مدعومة

مصادر ومواصفات

• مسودة Selectors Level 4.
• مواصفة Selectors Level 3.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.