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

1. בחירת אלמנט לפי ID

כל תגית HTML יכולה לכלול מאפיין ID שיהיה מזהה ייחודי עבור אלמנט זה. הכתיב נראה כך:

<img id="logo" src="logo.png" alt="company logo" />

בצורה זו ניתן לעצב כל אלמנט פרטנית באמצעות ID Selector ב CSS. כך למשל ניתן לתמונת הלוגו שלנו הצללה:

#logo {
  box-shadow: 4px 4px 2px 2px rgba(0,0,0,0.6);
}

2. בחירת אלמנט לפי Class

דרך נוספת לבחור אלמנטים אותה כבר ראינו היא תוך שימוש בסוג התגית (למשל <a>, <p> וכן הלאה), כך אנו מגדירים עיצוב כללי של העמוד.
המאפיין class שיכול להתווסף לכל אלמנט HTML נותן לנו דרך לסמן אלמנטים מסוימים בדף כדי להחיל עליהם כללי עיצוב. את הכללים עצמם אנו טוענים כמובן מקובץ CSS חיצוני. נתבונן בשורה הבאה מקובץ HTML:

<a href="#">Inbox <span class="badge">42</span></a>

ובקוד המתאים מתוך קובץ CSS:

.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #777;
    border-radius: 10px;
}

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

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

.large-text {
  font-size:42px;
}

.uppercase {
  text-transform: uppercase;
}

ואלמנט ה HTML:

<p class="large-text uppercase">testing</p>

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

3. Descendant Selector

בורר נוסף שנמצא בשימוש נרחב הינו בורר הצאצאים, שם קצת מסורבל לבורר שמאפשר לנו להחיל כללי CSS על אלמנט לפי מיקומו בעץ. קחו את קטע ה HTML הבא כדוגמא:

<div class="gallery">
  <img src="dog.png" alt="a dog" />
  <img src="cat.png" alt="a cat" />
  <img src="mouse.png" alt="a mouse" />
</div>

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

.gallery img {
  border: 5px solid blue;
  border-radius: 10px;
}

כך כל אלמנט img שמעליו קיים אלמנט עם קלאס .gallery יקבל את המאפיינים שהגדרנו. שימו לב שכלל מסוג זה יתפוס גם אם יש אלמנטים בין ה div ל-img.

4. State Selector

במקרים רבים נרצה להחיל כללי CSS רק כאשר אלמנט נמצא במצב מסוים: למשל כאשר העכבר נמצא בשטח האלמנט, לינק שלחצו עליו בעבר, אלמנט שנמצא כעת בפוקוס ועוד. הבוררים הרלוונטים למצבים אלו נקראים state selectors. בוררים אלו ״מולבשים״ על בוררים אחרים באמצעות סימן הנקודותיים, כך שאפשר להוסיף אותם לכל אחד מהבוררים שראינו. 

להלן מספר דוגמאות:

form:hover {
    /* 
    * the form should have orange background
    * when mouse cursor hovers inside
    */
    background: orange;
}

input:focus {
    border: 10px solid purple;
}

input:checked {
  display:block;
  width:100px;
  height:100px;
}

 

5. nth-child Selector

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

/* zebra striped table */
table tr {
  background:#a7a7a7;
  margin:0;
}

table tr:nth-child(2n) {
  background:#f1f1f1;
  margin:0;
}

/* first element is bold, rest are normal */
li:first-child {
  font-weight:bold;
}

 

6. תרגול

שימוש בבורר הנכון והכרה רחבה של כל סוגי הבוררים יכולים לחסוך לכם זמן פיתוח והסתבכויות מיותרות. בקישור:

http://flukeout.github.io/

תמצאו משחק שיעזור לכם לתרגל וללמוד עוד על CSS Selectors. המשימה במשחק היא לכתוב את ה Selector הנכון עבור אלמנט בכל אחד מהשלבים. דרך התרגול והתיעוד המשולב תזכו להכיר עוד כמה בוררים שלא הופיעו כאן וגם לראות מתי להשתמש בכל בורר.

7. קישורים לקריאה נוספת

דף סיכום קצר הכולל את כל ה CSS Selectors, כולל אלו שהופיעו בתרגיל) עם הסבר קצר ודוגמת שימוש לכל בורר:
http://www.cheetyr.com/css-selectors

דף סיכום נוסף (אם לא אהבתם את הקודם) הכולל כמעט את אותה הטבלא:
http://www.w3schools.com/cssref/css_selectors.asp

וטבלא אחרונה המסכמת איזה סלקטורים נתמכים באיזה דפדפנים:
http://kimblim.dk/css-tests/selectors/