CSS/Class Selectors

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

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

.spacious {
  margin: 2em;
}

أو لتحديد جميع العناصر التي لها قيمة معيّنة للخاصية class ولها نوع معيّن، مثل تحديد جميع عناصر <li> التي تكون قيمة الخاصية class فيها هي spacious:

li.spacious {
  margin: 2em;
}

الشكل العام لهذا المحدد:

.class_name { style properties }

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

[class~=class_name] { style properties }

أمثلة

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

div.classy {
  background-color: skyblue;
}

شيفرة HTML:

<p>Here's a p with some text.</p>
<div class="classy">This div has a special class on it!</div>
<div>This is just a regular div.</div>

أما هذا المُحدِّد فهو يُطابِق عناصر <p> التي لها الصنف classy و colored معًا، أي يجب أن تكون قيمة الخاصية class هي "classy colored"، ولن تُطابَق عناصر <p> التي تحتوي على صنف واحد من هذين الصنفين، لاحظ أنَّ ترتيب ورود الأصناف ضمن الخاصية class ليس مهمًا:

p.classy.colored {
  background-color: skyblue;
}

شيفرة HTML:

<p class="colored">Here's a p with some text. class="colored"</p>
<p class="colored classy">Here's a p with some text. class="colored classy"</p>
<p class="classy">Here's a p with some text. class="classy"</p>

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

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

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

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