محدد الفئة

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 12 من 76.

يُستخدم محدد الفئة (class selector) لتحديد عناصر HTML بناءً على قيمة سمة الـ class الخاصة بها. يتيح لك تطبيق نفس الأنماط على عناصر متعددة عبر مستندك. تُعد محددات الفئة مفيدة بشكل خاص عندما تريد تنسيق مجموعة من العناصر بنفس الطريقة، بغض النظر عن أسماء الوسوم (tags) الخاصة بها.

لاستهداف العناصر التي لها فئة (class) محددة في CSS الخاص بك، استخدم نقطة (.) متبوعة باسم الفئة. إليك الصيغة الأساسية لاستخدام محدد الفئة (class selector):

.classname {
    property: value;
}

على سبيل المثال:

.highlight {
    background-color: yellow;
    color: black;
}

في هذا المثال، يستهدف محدد الفئة .highlight جميع العناصر التي تملك الفئة "highlight". تقوم التصريحات بتعيين لون الخلفية إلى الأصفر ولون النص إلى الأسود لهذه العناصر.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عناصر متنوعة، بما في ذلك العناوين (<h1>، <h2>)، والفقرات (<p>)، والأقسام (<div>). بعض هذه العناصر تحتوي على سمة class. مهمتك هي استخدام محددات الفئات (class selectors) لتنسيق هذه العناصر. اتبع الخطوات أدناه:

أضف سمة class بالقيمة "blue-text" إلى عنصر <h1> وعنصر <p> الأول.
أضف سمة class بالقيمة "large-text" إلى عنصر <h2> وعنصر <p> الثاني.
اكتب قاعدة CSS باستخدام محدد فئة يستهدف جميع العناصر التي تحمل الفئة "blue-text". اضبط لون نص هذه العناصر على اللون الأزرق.
اكتب قاعدة CSS باستخدام محدد فئة يستهدف جميع العناصر التي تحمل الفئة "large-text". اضبط حجم خط هذه العناصر على 24 بكسل.

ورقة مرجعية

يستهدف محدد الفئة (class selector) عناصر HTML بناءً على قيمة سمة الـ class الخاصة بها. استخدم نقطة (.) متبوعة باسم الفئة:

.classname {
    property: value;
}

مثال:

.highlight {
    background-color: yellow;
    color: black;
}

يستهدف هذا جميع العناصر التي تحتوي على class="highlight" ويطبق الأنماط المحددة.

جرّب بنفسك

<html>
<head>
    <title>Class Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>