CSS -Selectors - 3, ID & Class Selectors

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

לעיתים קרובות נרצה להחיל עיצוב על אוסף "שרירותי" של תגיות, כלומר, על אוסף תגיות שאין ביניהן יחסי היררכייה קבועים.

הנה דוגמה טובה: אנחנו מציגים שגיאות והערות למשתמש באתר - כאשר סיסמת ההתחברות אינה נכונה, או כשהמשתמש מנסה לבצע פעולה לא חוקית (לרכוש עגלת קניות ריקה) או אפילו כדי להציג אזהרה (חיבור לא מאובטח). את כל ההערות נרצה לעצב באותה צורה (צבע רקע אדום בהיר עם מסגרת שחורה):

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

כמובן שנרצה לבנות את האתר כך שבמידה ויהיו לנו הודעות שגיאה נוספות, נוכל לעצב אותן בדיוק באותה צורה מבלי לשנות או להוסיף עיצובי css.

בוודאי שלא קיים סלקטור שיכול לנחש איזו תגית מכילה הערת שגיאה ואיזו לא - ולכן נוכל "לסמן" תגיות מסוימות ובכך לשייך אותן לאותה קבוצה (הודעות שגיאה / אזהרה).

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

כל תגית יכולה לקבל ערך class אחד או יותר (או בכלל לא):

<!-- Both Tags can now be easily selected with the CSS Class Selector -->

<h1 class="blogTitle">This Tag Belongs to the "blogTitle" class</h1>
<div class="blogTitle">This div also belongs to the "blogTitle" class</div>

הנה קוד ה-html בדוגמה למעלה עם שימוש ב class:

<p class="errorNote">
 <strong>Error:</strong><br/>
 We couldn't process your transaction, probably because you have no items in your cart.<br/>
 Please make that there are items in cart before checking out.
</p>


<div class="errorNote">
 <strong>Please check the following:</strong>
 <ul>
  <li>Username must contain at least 4 letters</li>
  <li>Password confirmation is not identical to previous password</li>
  <li>You must insert email address</li>
 </ul>
</div>

<h3 class="errorNote">Please note that you are not logged in</h3>

עכשיו לאחר שסימנו את כל התגיות המכילות הודעת שגיאה, נוכל להשתמש ב class selector כדי להחיל עליהן עיצוב:

.errorNote {
    background-color: #FECBCC;
    border: solid 1px black;
}

/* Is Identical To: */

*.errorNote {
   background-color: #FECBCC;
   border: solid 1px black:
}

נוסיף נקודה ולאחריה את שם המחלקה (הערך אותו הכנסנו למאפיין class) וכך נבחר את התגיות המתאימות.

נוכל אפילו להיות יותר ספציפיים עבור תגיות מסוימות, למשל, כדי לבחור את כל הרשימות שהן גם errorNote, נשתמש ב class selector בצורה הבאה:

ul.errorNote {
    list-style-type: square;
}

וכמובן לא נשכח שגם את ה class selector אפשר לשלב עם כל הסלקטורים שראינו עד עכשיו:

div > div .errorNote, p+.errorNote {
 background-color: #800003;
 color: white;
}

כמו שכבר ציינו, נוכל לתת לתגית אחת יותר מ class אחד:

<div class="main content thick">
 I have 3 classes!
</div>

כל אחד מהסלקטורים הבאים ישפיע על אותו div:

.main { /* ... */ }
.content { /* ... */ }
.thick { /* ... */ }

נוכל אפילו להגדיר עיצוב מיוחד לתגיות המשתייכות למספר מחלקות:

.leftBorder.rightBorder.infoBox { /* ... */ }

הסלקטור הזה למשל יחול אך ורק על התגית p בקוד למטה:

<p class="leftBorder rightBorder infoBox highlight"> ... </p>
<div class="leftBorder highlight"></div>
<table class="rightBorder infoBox"></table>

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

הקוד הבא, למשל, לא חוקי מאחר ויותר מתגית אחת מקבלת את הערך id=main:

<div id="main"></div>
<p id="main"></p>
<div id="main" class="special"></div>

כדי לבחור בתגית בעלת id מסוים נשתמש בסולמית - # ואחריה הערך המזהה,
קוד html:

<div id="mainContent">
 ...
</div>

סלקטור מתאים:

#mainContent { /* ... */ }

/* Identical To: */

div#mainContent { /* ... */ }

קיימים עוד שלושה סוגי סלקטורים - ה- attribute selector, ה- pseudo class selectors וה- pseudo elements selectors, עליהם נדבר בהרחבה בפוסט הבא.