عرض مصدر CSS/Class Selectors

<noinclude>{{DISPLAYTITLE:محددات الأصناف}}</noinclude>
مُحدِّد الصنف (class selector) في CSS يُطابِق العناصر وفق قيمة الخاصية <code>class</code> التابعة لها.

لاحظ أنَّه يمكن استخدام هذا المُحدِّد لتحديد على جميع العناصر التي لها قيمة معيّنة للخاصية <code>class</code>، كما في المُحدِّد الآتي:<syntaxhighlight lang="css">
.spacious {
  margin: 2em;
}
</syntaxhighlight>أو لتحديد جميع العناصر التي لها قيمة معيّنة للخاصية <code>class</code> ولها نوع معيّن، مثل تحديد جميع عناصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> التي تكون قيمة الخاصية <code>class</code> فيها هي <code>spacious</code>:<syntaxhighlight lang="css">
li.spacious {
  margin: 2em;
}
</syntaxhighlight>الشكل العام لهذا المحدد:<syntaxhighlight lang="css">
.class_name { style properties }

</syntaxhighlight>لاحظ أنَّ هذا المُحدِّد يماثل [[CSS/Attribute Selectors|مُحدِّد الخاصيات]] الآتي:<syntaxhighlight lang="css">
[class~=class_name] { style properties }
</syntaxhighlight>

== أمثلة ==
يمكننا أن نلاحظ في المثال التالي أنَّ جميع عناصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> في المستند التي لها الصنف <code>classy</code> ستكون بلونٍ أزرق (<code>skyblue</code>)، لاحظ أنَّ عنصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> الذي له الصنف <code>classy</code> لن يُطبَّق عليه هذا المُحدِّد:<syntaxhighlight lang="css">
div.classy {
  background-color: skyblue;
}
</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="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>
</syntaxhighlight>أما هذا المُحدِّد فهو يُطابِق عناصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> التي لها الصنف <code>classy</code> و <code>colored</code> معًا، أي يجب أن تكون قيمة الخاصية <code>class</code> هي <code>"classy colored"</code>، ولن تُطابَق عناصر <code>[[HTML/p|<nowiki><p></nowiki>]]</code> التي تحتوي على صنف واحد من هذين الصنفين، لاحظ أنَّ ترتيب ورود الأصناف ضمن الخاصية <code>class</code> ليس مهمًا:<syntaxhighlight lang="css">
p.classy.colored {
  background-color: skyblue;
}

</syntaxhighlight>شيفرة HTML:<syntaxhighlight lang="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>

</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|مدعومة
|مدعومة
|مدعومة
|مدعومة
|مدعومة
|}
==مصادر ومواصفات==
*مسودة [https://drafts.csswg.org/selectors-4/#class-html Selectors Level 4].
*مواصفة [https://drafts.csswg.org/selectors-3/#class-html Selectors Level 3].
*مواصفة ‎[http://www.w3.org/TR/CSS2/selector.html#class-html CSS Level 2 (Revision 1)]‎.
*مواصفة [http://www.w3.org/TR/CSS1/#class-as-selector CSS Level 1].
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Selectors|{{SUBPAGENAME}}]]