בוררים

הפודקאסט בשירות 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 מוצאים את עצמם במצבים שונים, כי יש להם אינטראקציה, או אחד מהאלמנטים הצאצאים שלהם במצב מסוים.

לדוגמה, משתמש יכול להעביר את העכבר מעל רכיב ה-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.

שילוב אחים ואחיות

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

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

שילוב צאצא

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

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

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

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

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

a.my-class {
  color: red;
}

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

בדיקת ההבנה

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

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

משאבים

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