בוררים

הפודקאסט של CSS – 002: סלקטורים

אם יש לכם טקסט שאתם רוצים להיות גדול יותר ואדום רק אם זו הפסקה הראשונה במאמר, איך עושים את זה?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

משתמשים בסלקטור ב-CSS כדי למצוא את הרכיב הספציפי ולהחיל כלל CSS, כמו בדוגמה הבאה.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

ב-CSS יש מגוון אפשרויות לבחירת רכיבים ולהחיל עליהם כללים, מפשוטים מאוד ועד למורכבים מאוד, כדי לפתור מצבים כאלה.

החלקים של כלל CSS

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

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

בוררים פשוטים

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

בורר אוניברסלי

בורר אוניברסלי — המכונה גם תו כללי לחיפוש — יתאים לכל רכיב.

* {
  color: hotpink;
}

הכלל הזה גורם לכל רכיב HTML בדף להציג טקסט בצבע לווץ'.

בורר סוג

בורר סוג תואם ישירות לרכיב HTML.

section {
  padding: 2em;
}

הכלל הזה גורם לכך שלכל רכיב <section> יהיה 2em של padding בכל הצדדים.

בורר הכיתות

רכיב HTML יכול לכלול פריט אחד או יותר המוגדרים במאפיין class. בורר המחלקות תואם לכל רכיב שהמחלקה הזו חלה עליו.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

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

.my-class {
  color: red;
}

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

רכיב HTML עם המחלקה .my-class עדיין יותאם לכלל ה-CSS שלמעלה, גם אם יש לו מספר מחלקות אחרות, כמו בדוגמה הזו:

<div class="my-class another-class some-other-class"></div>

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

בורר המזהים

רכיב HTML עם המאפיין id צריך להיות הרכיב היחיד בדף עם ערך המזהה הזה. בוחרים רכיבים באמצעות בורר מזהים כמו בדוגמה הבאה:

#rad {
  border: 1px solid blue;
}

שירות CSS זה יחיל גבול כחול על רכיב ה-HTML שיש לו id של rad, באופן הבא:

<div id="rad"></div>

בדומה לבורר המחלקה ., משתמשים בתו # כדי להורות ל-CSS לחפש רכיב שתואם ל-id שמופיע אחריו.

בורר מאפיינים

בעזרת בורר המאפיינים אפשר לחפש רכיבים שיש להם מאפיין HTML מסוים או שיש להם ערך מסוים במאפיין HTML. הורה ל-CSS לחפש מאפיינים על-ידי שימוש בסוגריים מרובעים ([ ]) כדי להקיף את הסלקטור.

[data-type='primary'] {
  color: red;
}

שירות ה-CSS הזה מחפש את כל האלמנטים שיש להם מאפיין של data-type עם ערך primary, באופן הבא:

<div data-type="primary"></div>

במקום לחפש ערך ספציפי של data-type, אפשר גם לחפש רכיבים עם המאפיין הקיים, ללא קשר לערך שלו.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

שני רכיבי <div> האלה יכילו טקסט אדום.

כדי להשתמש בבוררי מאפיינים תלויי אותיות רישיות אפשר להוסיף את האופרטור s לבורר המאפיינים.

[data-type='primary' s] {
  color: red;
}

המשמעות היא שאם רכיב HTML כלל את data-type של Primary, במקום primary, הוא לא היה מקבל טקסט אדום. אפשר להשתמש באופרטור i כדי לעשות את הפעולה ההפוך – לא תלוי-רישיות.

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

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

בוררי קיבוץ

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

strong,
em,
.my-class,
[lang] {
  color: red;
}

הדוגמה הזו מרחיבה את שינוי הצבע לרכיבי <strong> וגם לרכיבי <em>. הוא מורחב גם למחלקה בשם .my-class ולרכיב שיש לו מאפיין lang.

בדיקת ההבנה

בחינת הידע שלכם בבוררים פשוטים

* {}

div {}

פסאודו מחלקות ופסאודו רכיבים

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

פסאודו מחלקות

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

לדוגמה, משתמש יכול להעביר את העכבר עם סמן העכבר או גם רכיב צאצא יכול להעביר את העכבר מעליו. למצבים האלה, יש להשתמש בפסאודו-מחלקה :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

תוכלו למצוא מידע נוסף במודול 'פסאודו מחלקות'.

פסאודו-רכיב

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

.my-element::before {
  content: 'Prefix - ';
}

כמו בהדגמה שלמעלה, שבה הוספת תחילית לתווית קישור לסוג הקובץ שהיא הייתה בו, אפשר להשתמש בפסאודו-רכיב ::before כדי להוסיף תוכן בתחילת הרכיב, או להשתמש בפסאודו-רכיב ::after כדי להוסיף תוכן בסוף הרכיב.

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

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

אפשר להשתמש ב-::selection גם כדי לסגנן את התוכן שמשתמש מודגש.

::selection {
  background: black;
  color: white;
}

מידע נוסף זמין במודול על פסאודו-רכיבים

בדיקת ההבנה

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

p:hover {
  background: white;
  color: black;
}

בוררים מורכבים

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

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

קומבינטורים

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

משולב-צאצא

כדי להבין את שילובי הצאצאים, צריך להבין קודם את רכיבי ההורה והצאצא.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

רכיב ההורה הוא <p> שמכיל טקסט. בתוך הרכיב הזה של <p> יש רכיב <strong>, ולכן התוכן שלו מודגש. מאחר שהוא נמצא בתוך ה-<p>, הוא רכיב צאצא.

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

p strong {
  color: blue;
}

קטע הקוד הזה בוחר את כל רכיבי <strong> שהם רכיבי צאצא של רכיבי <p> בלבד, והופך אותם לכחולים באופן חזרתי.

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

בחלונית ה-HTML בהדגמה הזו אפשר לראות איך לרכיב .top יש כמה רכיבי צאצא של <div> שבעצם הם כוללים רכיבי צאצא <div>.

השילוב האח הבא

תוכלו לחפש רכיב שמיד אחרי רכיב אחר על ידי שימוש בתו + בבורר.

כדי להוסיף רווח בין רכיבים מוערם, אפשר להשתמש בשילוב עם האח הבא כדי להוסיף רווח רק אם רכיב הוא האח הבא של רכיב צאצא של .top.

אפשר להוסיף שוליים לכל רכיבי הצאצא של .top באמצעות הבורר הבא:

.top * {
  margin-top: 1em;
}

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

קומבינטור אח עוקב

שילוב הבא דומה מאוד לסלקטור האח הבא. עם זאת, במקום תו +, צריך להשתמש בתו ~. ההבדל ביניהם הוא שרכיב פשוט צריך לעקוב אחרי רכיב אחר עם אותו הורה, במקום להיות הרכיב הבא עם אותו הורה.

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

שילוב צאצא

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

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

כדי לפתור את הבעיה הזו, כדאי לשנות את בורר האח הבא כך שיכלול שילוב צאצא: > * + *. הכלל יחול עכשיו רק על צאצאים ישירים של .top.

בוררים מורכבים

אפשר לשלב סלקטורים כדי לשפר את הספציפיות והקריאות. לדוגמה, כדי לטרגט לרכיבי <a> שיש להם גם מחלקה של .my-class, צריך לכתוב את הפקודה הבאה:

a.my-class {
  color: red;
}

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

בדיקת ההבנה

בחינת הידע שלכם בבוררים מורכבים

section.awesome {
  border: 1px solid hotpink;
}

מקורות מידע

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