الدرس 02 · Styling basics

Selectors

لم يُترجم بعد؛ يُعرض باللغة الإنجليزية

A selector is the pattern at the start of a CSS rule that picks which elements the rule styles. Watch the browser test three rules against four elements: the type selector p reaches every paragraph, the class selector .new reaches every element with class="new", and the ID selector #top reaches the one element with id="top". Each rule then restyles only the elements it matched.

9 دقيقة9 خطوات5 أسئلةBeginner

شكل 2 · تفاعلي

جارٍ تحميل الرسم…

أو ← →

اختبر نفسك

5 أسئلة سريعة

اختر إجابة لتعرف السبب. تُحفَظ نتيجتك مع تقدّمك.

01The page has <h1>Menu</h1> and three <p> elements. Which elements does p { font-size: 20px; } style?

p is a type selector: a tag name. It matches every element whose tag is p, so all three paragraphs. The h1 is not a p.

02Which selector matches every element with class="new"?

A class selector is a dot followed by the class name: .new. A bare name like new would be a type selector looking for a <new> tag.

03Which selector matches the element <h1 id="top">Menu</h1> by its id?

An ID selector is a hash followed by the id: #top.

04Why does an ID selector reach at most one element on a valid page?

HTML says an id must be unique in the page. A class can be put on as many elements as you like, which is why classes are for reusable styles.

05<p>Coffee</p> and <p class="new">Tea</p> are on the page. Which does .new { color: tomato; } turn tomato?

A class selector looks only at the class attribute, not the tag. Tea has class="new"; Coffee has no class.

المصطلحات الأساسية

المسرد

Selector: The pattern at the start of a CSS rule that picks which elements the rule styles.
Type selector: A selector that is just a tag name, such as p. It matches every element with that tag.
Class selector: A dot and a class name, such as .new. It matches every element whose class attribute contains that word.
ID selector: A hash and an id, such as #top. It matches the element whose id attribute is top.
class attribute: An HTML label you can put on any number of elements: class="new". One element can have several classes, separated by spaces.
id attribute: An HTML name for one element: id="top". It must be unique in the page.
Match: An element matches a selector when it fits the pattern; only matching elements get the rule's declarations.

تفاصيل إضافية

الملاحظات والمصادر

No two rules here set the same property on the same element, so they never compete. When two matching rules do set the same property, the cascade and specificity decide which one wins.
A real browser works out every element's style in one pass. The figure tests one rule at a time so you can see what each selector reaches.
There are more selectors: * (the universal selector) matches every element, a comma joins selectors into a list (h1, .new { … } styles both), and an element can wear several classes, separated by spaces: class="new big".
The HTML card shows the body of the page. The full index.html also has <!DOCTYPE html>, <head> with a <title>, and <link rel="stylesheet" href="style.css"> inside <head>.
Save the full page as index.html and the three rules as style.css in the same folder, open index.html in a browser, and you get a teal heading, three 20px paragraphs, and Tea and Cake in tomato.

اختبار يتاح بعد الخطوة الأخيرة.