محددات المجموعات

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

يُستخدم محدد المجموعة (group selector) لتحديد عناصر HTML متعددة وتطبيق نفس الأنماط عليها جميعاً. وهذا مفيد بشكل خاص عندما تريد تطبيق مجموعة مشتركة من الأنماط على عناصر مختلفة دون الحاجة إلى كتابة قواعد منفصلة لكل عنصر. من خلال تجميع المحددات، يمكنك كتابة كود CSS أكثر إيجازاً وكفاءة.

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

selector1, selector2, selector3 {
    property: value;
}

على سبيل المثال، لنفترض أنك تريد تطبيق نفس لون النص وحجم الخط على جميع عناصر <h1> و <h2> و <p>. يمكنك استخدام محدد المجموعة (group selector) بهذا الشكل:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

في هذا المثال، يستهدف محدد المجموعة جميع العناصر <h1> و <h2> و <p>. تقوم التصريحات بتعيين لون النص إلى اللون الأزرق وحجم الخط إلى 16 بكسل لجميع هذه العناصر.

يمكنك تجميع أي نوع من المحددات (selectors)، بما في ذلك محددات النوع (type selectors)، ومحددات الفئات (class selectors)، ومحددات المعرفات (ID selectors):

h1, .highlight, #intro {
    background-color: yellow;
}

التحدي

سهل

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

اكتب قاعدة CSS باستخدام محدد مجموعة يستهدف جميع عناصر <h1> و <h2>. قم بتعيين لون النص لهذه العناصر إلى red.
اكتب قاعدة CSS باستخدام محدد مجموعة يستهدف جميع عناصر <p> وعنصر <div>. قم بتعيين لون الخلفية لهذه العناصر إلى lightgray وحجم الخط إلى 18 pixels.

ورقة مرجعية

يسمح لك محدد المجموعة بتطبيق نفس الأنماط على عناصر HTML متعددة عن طريق الفصل بين المحددات بفواصل (,):

selector1, selector2, selector3 {
    property: value;
}

مثال على تجميع محددات العناصر:

h1, h2, p {
    color: blue;
    font-size: 16px;
}

يمكنك تجميع أي نوع من المحددات (النوع، الفئة، المعرف):

h1, .highlight, #intro {
    background-color: yellow;
}

جرّب بنفسك

<html>
<head>
    <title>Group Selectors</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>
    <div>This is a division.</div>
</body>
</html>