محددات الأصناف
< CSS
مُحدِّد الصنف (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;
}
<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;
}
<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.