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

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

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

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

selector1, selector2, selector3 {
    property: value;
}

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

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

في هذا المثال، يستهدف محدد المجموعة (group selector) جميع عناصر <h1> و <h2> و <p>. تقوم التصريحات بتحديد لون النص إلى blue وحجم الخط إلى 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 بكسل.

جرّب بنفسك

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