مختاريات الفئات CSS

في CSS، يتم عرض اختيارات الفئة بشرط نقطة واحدة:

.center {text-align: center}

في المثال السابق، جميع العناصر HTML التي تحتوي على فئة center تكون مرتبة في الوسط.

في الكود HTML التالي، كلاً من عناصر h1 و p تحتوي على فئة center. هذا يعني أن كلاً منهما سيتبع قواعد اختيار selector ".center".

<h1 class="center">
سيكون هذا العنوان مرتباً في الوسط
</h1>
<p class="center">
هذا الفقرة سيكون مرتباً في الوسط.
</p>

ملاحظة:لا يمكن استخدام الرقم الأول للاسم الفئة! لن يكون له تأثير في Mozilla أو Firefox.

تماماً مثل id، يمكن استخدام class كنوع من اختيارات الاستشهاد المشتقة:

.fancy td {
	color: #f60;
	background: #666;
	}

في هذا المثال، جميع وحدات الجدول داخل العنصر الأكبر الذي يحتوي على اسم فئة fancy ستعمل على عرض النص الأصفر بالخلفية الرمادية. (العنصر الأكبر الذي يحتوي على اسم فئة fancy قد يكون جدولاً أو div)

يمكن اختيار العناصر بناءً على فئاتها:

td.fancy {
	color: #f60;
	background: #666;
	}

في المثال أعلاه، سيكون الخلية التي تحتوي على فئة fancy مغطاة باللون الأزرق الفاتح والأصفر النار.

<td class="fancy">

يمكنك تخصيص فئة fancy لأي عنصر جدول غير محدود. سيكون جميع الخلايا المميزة بـ fancy مغطاة باللون الأزرق الفاتح والأصفر النار. لن تتأثر الخلايا التي لم تُخصّص بفئة fancy بهذه القاعدة. بالإضافة إلى ذلك، لن تكون الفقرات التي تحتوي على فئة fancy مغطاة باللون الأزرق الفاتح والأصفر النار، كما لن تتأثر أي عناصر أخرى معلومة بـ fancy بهذه القاعدة. هذا بسبب الطريقة التي كتبنا هذه القاعدة بها، هذا التأثير محدود إلى الخلايا المميزة بـ fancy (أي باستخدام عنصر td لاختيار فئة fancy).

المحتوى المرتبط

إذا كنت بحاجة إلى تعلم المزيد عن مختاريات الفئات، يرجى قراءة دروس CodeW3C.com المتقدمة:تفصيل مختاريات الفئات CSS.