בוררים

The CSS Podcast – 002: Selectors

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

<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>.

פונקציית combinator של אח/ה הבא/ה

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

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