Lesson 6 / الدرس 6

Grouping & the universal selector / التجميع والمُحدِّد الشامل

Style several selectors at once with a comma, or reach every element on the page with * — and know when each is the right tool.

نسّق عدة مُحدِّدات دفعة واحدة بفاصلة، أو صِل إلى كل عنصر في الصفحة بـ * — واعرف متى يكون كل منهما الأداة الصحيحة.

You now know several ways to select elements: by tag, by class, by id. Often you want the exact same rule to apply to more than one of them — three heading levels, say, all in the same color. Writing three separate rules repeats yourself. A comma lets you write the rule once.

Grouping with a comma

h1, h2, h3 {
    color: navy;
}

A comma between selectors means "apply this rule to each of them separately". It is not one combined selector — it is a list.

Grouping works with any kind of selector, mixed freely — tags, classes, ids, together in the same list.

.alert, #footer, strong {
    font-weight: bold;
}

One class, one id, and one tag, all bolded by a single rule.

الفاصلة والمسافة تعنيان شيئين مختلفين تمامًا. h1, p مُحدِّدان منفصلان — نسّق كل واحد منهما. أما h1 p (بلا فاصلة) فهو مُحدِّد واحد يعني "عنصر p بداخل h1"، وهذا نادرًا ما يطابق شيئًا. نسيان الفاصلة خطأ صامت: لا رسالة خطأ، فقط قاعدة لا تفعل شيئًا بهدوء. الدرس التالي يشرح معنى المسافة فعليًا.

The universal selector: *

A single asterisk selects every element on the page — every div, every p, every span, all of them, no exceptions. It needs no dot, no hash, no tag name.

علامة النجمة وحدها تختار كل عنصر في الصفحة — كل div، وكل p، وكل span، كلها بلا استثناء. ولا تحتاج نقطة ولا علامة # ولا اسم وسم.

* {
    margin: 0;
    padding: 0;
}

A classic use: strip the default margin and padding every browser adds, so you start from a clean, predictable starting point. (Those two properties get a lesson of their own later, as the box model.)

استخدم * بحذر. فهي تصل إلى كل عنصر في الصفحة، حتى العناصر المتداخلة بعمق داخل غيرها، فقاعدة غير مدروسة قد تُلغي تنسيقات وضعتها في مكان آخر وتجعل تتبّع التتالي صعبًا. الأكثر أمانًا أن تحصرها في منطقة واحدة، مثل .card *، أو أن تخصّصها لعملية Reset واحدة مقصودة في أعلى ملف CSS.

.container * {
    box-sizing: border-box;
}

Scoped like this, the universal selector only reaches elements inside .container — the rest of the page is untouched.

هكذا محصورًا، يصل المُحدِّد الشامل فقط إلى العناصر داخل .container — وباقي الصفحة لا يتأثر.

A comma groups selectors: one rule, applied to each one separately.
* matches every single element on the page.
Scope * to a container when you can, instead of leaving it bare.

Try it live / جرّب بنفسك

<div class="container">
    <h1>Welcome</h1>
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
</div>

.container {
    /* add your grouped selector rule here */
}

.container * {
    /* add your universal selector rule here */
}

Preview / المعاينة

Check yourself / اختبر نفسك

1. What does a comma do between two selectors in one CSS rule?

2. Which selector matches every element on the page?

3. What is the main risk of using * carelessly across an entire page?

ما الخطر الأساسي لاستخدام * بلا حذر على الصفحة كلها؟

Your task / مهمتك

Build a small page with a container holding a heading and two paragraphs. Group the heading tags so any of h1, h2, h3 share one color rule, then use the universal selector — scoped to the container — to give every element inside it the same box-sizing.

ابنِ صفحة صغيرة فيها حاوية تضم عنوانًا وفقرتين. اجمع وسوم العناوين حتى يشترك أي من h1 و h2 و h3 في قاعدة لون واحدة، ثم استخدم المُحدِّد الشامل — محصورًا داخل الحاوية — لتعطي كل عنصر بداخلها نفس box-sizing.

Groups at least two selectors with a comma into a single rule يجمع مُحدِّدين على الأقل بفاصلة في قاعدة واحدة
Uses the universal selector * at least once, scoped to the container يستخدم المُحدِّد الشامل * مرة واحدة على الأقل، محصورًا داخل الحاوية
Every heading in the page shares the same color كل عنوان في الصفحة يشترك في اللون نفسه