محدد الفئة

جزء من قسم التنسيق باستخدام CSS في رحلة HTML على Coddy. الدرس 12 من 76.

يُستخدم محدِّد الفئة لاختيار عناصر HTML استنادًا إلى قيمة السمة class الخاصة بها. يتيح لك تطبيق الأنماط نفسها على عدة عناصر في مستندك. وتكون محددات الفئات مفيدة على وجه الخصوص عندما تريد تنسيق مجموعة من العناصر بالطريقة نفسها، بصرف النظر عن أسماء وسومها.

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

.classname {
    property: value;
}

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

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

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

التحدي

سهل

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

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

جرّب بنفسك

<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>