מה זה Selectors ב- CSS ולמה צריך אותם

כמו שאנחנו כבר יודעים, הדפים שאנחנו מפתחים כוללים HTML, שאחראי על התוכן של הדף, וגיליון CSS שמקושר ל- HTML ואחראי על העיצוב של הדף.
הרעיון של CSS הוא שהוא מאפשר לנו להשתמש בשלל עיצובים לחלקים שונים ב- HTML.
כיוון שה- CSS נמצא בקובץ נפרד, אנו צריכים דרך לקשר בין הגדרת האלמנט, שנמצאת בקובץ ה- HTML, לבין העיצוב שלו, שנמצא בקובץ ה- CSS.
זהו בדיוק תפקידם של ה- slector-ים - לבחור את החלקים ב- HTML שעליהם נחיל את העיצוב.

סוגים של selector-ים ב- CSS

יש שלושה סוגים עיקריים של סלקטורים ב- CSS.

  1. הסוג הראשון הוא סלקטורים מבוססי סוג אלמנט. זה שימושי כאשר רוצים לעצב את כל האלמנטים מסוג מסוים באופן אחיד. אפשר למשל לקבוע מהו העיצוב שנרצה לתת לכותרות מסוג h1. אפשר להגדיר את העיצוב הזה ב- CSS עם Selector של h1 והוא יוחל על כל האלמנטים מסוג h1 שנמצאים בדף.

  2. הסוג השני הוא סלקטורים מבוססי class. זה מאפשר להשתמש באותו עיצוב על כמה אלמנטים HTML-יים. מגדירים את העיצוב שרוצים ב- CSS עם selector של class. העיצוב יוחל על כל האלמנטים ששייכנו ל- class הזה ב- HTML (ורק עליהם).

  3. הסוג השלישי הוא סלקטורים מבוססי id. זה מאפשר להגדיר עיצוב לאלמנט HTML ספציפי. הרעיון הוא שלכל אלמנט HTML-י אמור להיות id ייחודי משלו, לכן אם נגדיר ב- CSS עיצוב עם סלקטור של id, הוא יוחל רק על האלמנט שזה ה- id שלו.

איך משייכים אלמנט HTML-י ל- class

בואו נניח שיש לנו את קוד ה- HTML הבא (לצורך התמציתיות, אני אכתוב את ה- body בלבד):

<body>
    <h1>This is the heading!</h1>
    <p>This is the content of the page</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus natus</p>
</body>

כדי לשייך את ה- p הראשון ל- class שנקרא pstyle, נוסיף לו attribute מסוג class:

<body>
    <h1>This is the heading!</h1>
    <p class="pstyle">This is the content of the page</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus natus</p>
</body>

קביעת עיצוב של class ב- CSS

כדי להחיל עיצוב על האלמנטים ששייכים ל- pstyle, נעבור לקובץ ה- CSS. אם יש בו תוכן שנשאר מקודם - מחקו אותו, וכתבו בו את התוכן הבא:

.pstyle {
	color: blue;
}

שימו לב לנקודה שמופיעה לפני שם ה- class. הנקודה הזו היא ה- prefix שמציין class.
כשמרעננים את הדף בדפדפן, מקבלים:

 

כדי להחיל את העיצוב של ה- class pstyle גם על הפסקה השנייה, כל שצריך לעשות הוא לשייך גם אותה ל- class הזה:

<body>
    <h1>This is the heading!</h1>
    <p class="pstyle">This is the content of the page</p>
    <p class="pstyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus natus</p>
</body>

וכשמרעננים את הדף כעת, מקבלים:

 

קביעת עיצוב לכל האלמנטים מסוג מסוים באמצעות CSS

הדף שלנו מכיל שתי פסקאות, שהן אלמנטים מסוג p. כמו שראינו, החלנו את העיצוב pstyle על שתיהן, כלומר על כל הפסקאות בדף. במקרה כזה, אפשר לקבוע עיצוב גלובלי שיחול על כל הפסקאות, ללא צורך לשייך כל אחת מהן ל- class. כדי לעשות זאת, נמחק את ה- attribute של ה- class משתי הפסקאות. כמו כן, נשנה גם את קובץ ה- CSS שלנו:

p {
	color: blue;
}

שימו לב להיעדר הנקודה לפני ה- p. אנו צריכים את הנקודה רק כאשר אנו מפרטים עיצוב של class, אבל פה אנו מפרטים עיצוב של סוג של אלמנט לכן אין נקודה.
כשמרעננים את הדף, מקבלים:

 

 

כמו שאנחנו רואים, השיטה הזו חסכה לנו את השיוך של הפסקאות ל- class, אך מצד שני היא פחות גמישה כיוון שהיא פועלת על כל האלמנטים מהסוג באופן גורף.

קביעת עיצוב של אלמנט HTML-י לפי ה- id שלו

לפעמים נרצה להחיל עיצוב רק על אלמנט HTML מסוים. כמובן שאפשר לעשות זאת על ידי שיוך של האלמנט ל- class חדש, שרק האלמנט הזה יהיה שייך אליו. אבל בעוד דבר לא מונע מאיתנו לשייך הרבה אלמנטים HTML-יים לאותו class, אם ננסה לתת למספר אלמנטים HTML-יים את אותו ID, נקבל אזהרה מהדפדפן. שימו לב איך בדוגמה הבאה, כאשר אנו משתמשים ב- “sameID” עבור שני אלמנטים שונים, אנו מקבלים אזהרה מהדפדפן:

 

 

חשוב לציין שהאזהרה הזו היא אזהרה “רכה”. דבר לא באמת מונע מאיתנו להשתמש באותו ID כמה פעמים. האחריות על כך מוטלת בעיקר על המפתח, ועלינו לדעת, כמפתחים, שקוד HTML שעושה שימוש באותו ID למספר אלמנטים שונים הוא קוד לא תקין, גם אם הוא עובד.

כלומר, ב- HTML תקין כל ID משמש לכל היותר אלמנט בודד. בואו ניתן ID לפסקת ה- HTML הראשונה שלנו:

<body>
    <h1>This is the heading!</h1>
    <p id="firstP">This is the content of the page</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus natus</p>
</body>

כעת, נוכל לקבוע את העיצוב של הפסקה הזו ב- CSS:

#firstP {
	color: blue;
}

שימו לב שה- prefix של ID הוא סולמית. שימו לב להבדל מהנקודה, ששימשה אותנו כ- prefix כאשר השתמשנו ב- class.

כאשר מרעננים את הדף, מקבלים:

 

 

סוגי סלקטורים ב- CSS - סיכום

סוג ה- selector prefix (מציין ב- CSS) איך מסמנים ב- HTML מתי נשתמש
סוג אלמנט אין על ידי שימוש באלמנט מסוג זה כאשר רוצים להחיל את העיצוב על כל האלמנטים מסוג מסוים באופן גורף
class . (נקודה) על ידי ה- attribute class כאשר נרצה לבחור את האלמנטים עליהם יוחל העיצוב
id # (סולמית) על ידי ה- attribute id כאשר נרצה להחיל עיצוב על אלמנט בודד