Selectors — class and id
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · تحتاج هذه الصفحة إلى متصفح حديث (يدعم SharedArrayBuffer). يرجى تحديث Chrome أو Edge أو Firefox أو Safari إلى أحدث إصدار.
English
Three kinds of selector
- A selector says which elements a rule changes.
- By tag:
p { ... }changes every<p>. - That is the kind you used last lesson.
العربية
ثلاثة أنواع من المحددات
- المحدد يقول أي عناصر تقوم القاعدة بتغييرها.
- بالوسم:
p { ... }يغير كل<p>. - هذا هو النوع الذي استخدمته في الدرس الماضي.
English
By class and by id
- By class:
.note { ... }changes every element withclass="note". A dot.means class. - By id:
#title { ... }changes the one element withid="title". A hash#means id. - A class can be on many elements; an id should be on one.
العربية
بالفئة وبـ ID
- بالفئة:
.note { ... }يغيّر كل عنصر باستخدامclass="note". نقطة.تعني الفئة. - بـ ID:
#title { ... }يغير العنصر الواحد الذي يحملid="title". علامة الهاش#تعني ID. - يمكن للفئة أن تكون على العديد من العناصر؛ بينما يجب أن يكون الـ ID على عنصر واحد.
<style>
.note { color: green; }
#title { color: purple; }
</style>
<h1 id="title">My page</h1>
<p class="note">This is a note.</p>
<p>This is normal.</p>
English
Common mistakes
- A class selector starts with
., an id selector with#. - Reuse a class on many elements; an id appears once per page.
العربية
أخطاء شائعة
- يبدأ محدد الفئة بـ
.، ومحدد الـ ID بـ#. - أعد استخدام الفئة على العديد من العناصر؛ ويظهر الـ ID مرة واحدة في الصفحة.
English
Now you try
- Match the dot
.to a class, and the hash#to an id. - Style a class, then style an id.
العربية
الآن جرب بنفسك
- طابق النقطة
.مع الفئة، وعلامة الهاش#مع الـ ID. - صمم الفئة، ثم صمم الـ ID.
Style the note. Add a rule for the note class: .note { color: green; } (a dot means class).
Style the title. Add a rule for the title id: #title { color: purple; } (a hash means id).