Selectors — class and id · סלקטורים — class ו-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.
עברית
לפי מחלקה ולפי מזהה ייחודי
- לפי מחלקה:
.note { ... }משנה כל אלמנט עםclass="note". נקודה.מסמלת מחלקה. - לפי מזהה ייחודי (ID):
#title { ... }משנה את אלמנט אחד עםid="title". סימן התאית#מסמל מזהה ייחודי. - מחלקה יכולה להיות על מספר אלמנטים; מזהה ייחודי אמור להיות על אלמנט אחד בלבד.
<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.
עברית
טעויות נפוצות
- מזהה מחלקה מתחיל ב-
., ומזהה מזהה ייחודי מתחיל ב-#. - השתמש במחלקה על מספר אלמנטים; מזהה ייחודי מופיע פעם אחת בדף.
English
Now you try
- Match the dot
.to a class, and the hash#to an id. - Style a class, then style an id.
עברית
כעת תנסו בעצמכם
- התאם את הנקודה
.למחלקה, ואת סימן התאית#למזהה ייחודי. - עצב מחלקה, ואז עצב מזהה ייחודי.
Style the note. Add a rule for the note class: .note { color: green; } (a dot means class). · עצב את ההערה. הוסף כלל עבור class ה-note: .note { color: green; } (נקודה מסמלת class).
Style the title. Add a rule for the title id: #title { color: purple; } (a hash means id). · עצב את הכותרת. הוסף כלל עבור id ה-title: #title { color: purple; } (סימן # מסמל id).