Lesson 4 / الدرس 4

Element selectors / محدِّدات العناصر

The simplest selector is a bare tag name: write p and the rule reaches every  on the page at once — one rule, as many elements as the page happens to have.

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

You met the selector already: the part of a rule that says which elements it applies to. This lesson is about the simplest kind there is — a bare tag name, called an element selector — and what it means for one rule to reach many elements at once.

p {
    color: navy;
}

Write the tag name with no punctuation around it. This rule reaches every  on the page, however many there are.

اكتب اسم الوسم بلا أي علامات حوله. تصل هذه القاعدة إلى كل  في الصفحة، مهما كان عددها.

One rule, every matching element

It makes no difference whether the page has one  or thirty — the rule above reaches every one of them, because the selector names the tag, not a specific element. Compare that to inline style, which touches only the one element it is written on: an element selector is what lets you style a whole page's worth of paragraphs from a single rule.

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

<p style="color: navy;">First paragraph.</p>
<p style="color: navy;">Second paragraph.</p>
<p style="color: navy;">Third paragraph.</p>

The inline way of reaching the same result: the same style repeated on every single paragraph. The element selector on the previous example said the same thing once.

الطريقة المباشرة للوصول لنفس النتيجة: نفس style مكرر على كل فقرة على حدة. أما محدِّد العنصر في المثال السابق فقال نفس الشيء مرة واحدة فقط.

Any tag name works as a selector this way: h1, a, li, div — whatever element you want to reach. Each tag name starts its own separate rule; styling <h2> and styling <li> together needs two rules, not one.

يعمل أي اسم وسم بهذه الطريقة كمُحدِّد: h1، a، li، div — أي عنصر تريد الوصول إليه. وكل اسم وسم يبدأ قاعدته المستقلة؛ فتنسيق <h2> و <li> معًا يحتاج قاعدتين، لا قاعدة واحدة.

h2 {
    color: navy;
}

li {
    color: #555;
}

Two separate rules, one per tag. Each reaches only the elements matching its own selector.

Getting the syntax right

لا تكتب علامتي القوس في المُحدِّد — فـ  { color: navy; } خطأ، رغم أن  هي بالضبط طريقة كتابة الوسم في HTML. أما في CSS فالمُحدِّد هو الاسم المجرّد فقط: p { color: navy; }.

Selector	Selects
p	Every <p> on the page
h1	Every <h1> on the page
a	Every link
li	Every list item
img	Every image

A handful of element selectors and what they reach.

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

<h2>Ingredients</h2>
<ul>
    <li>Flour</li>
    <li>Sugar</li>
    <li>Eggs</li>
</ul>

<p>Mix everything together and bake for 30 minutes.</p>

/* style h2, li, and p here */

Preview / المعاينة

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

1. Which selector selects every <li> element on the page?

أي مُحدِّد يختار كل عنصر <li> في الصفحة؟

2. A page has five  elements and you write p { color: navy; }. How many turn navy?

الصفحة فيها خمسة عناصر  وكتبت p { color: navy; }. كم عنصرًا يصبح لونه navy؟

3. What is wrong with the selector  { color: navy; }?

ما الخطأ في المُحدِّد  { color: navy; }؟

Your task / مهمتك

Style the recipe page below using only element selectors: give the heading and the paragraph different colors, and make every list item share one consistent color.

نسّق صفحة الوصفة أدناه بمحدِّدات العناصر فقط: أعطِ العنوان والفقرة ألوانًا مختلفة، واجعل عناصر القائمة تشترك في لون واحد ثابت.

Uses a tag selector for at least two different tags يستعمل محدِّد عنصر لوسمين مختلفين على الأقل
Every element of a matched tag gets the style, not just one كل عنصر من الوسم المطابق يأخذ التنسيق، لا عنصر واحد فقط
The heading, the paragraph, and the list items are visibly different from each other العنوان والفقرة وعناصر القائمة تبدو مختلفة عن بعضها بوضوح