פסאודו-רכיבים

הפודקאסט של CSS – 014: Pseudo-elements

אם יש לכם מאמר תוכן ואתם רוצים שהמכתב הראשון יהיה הרבה יותר גדול, איך תשיגו את זה?

שתי פסקאות טקסט עם טיפה כחולה

ב-CSS, אפשר להשתמש בפסאודו-רכיב ::first-letter כדי להשיג את סוג העיצוב הזה.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

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

::before וגם ::after

גם הרכיב ::before וגם רכיב צאצא מסוג ::after יוצרים רכיב צאצא בתוך רכיב רק אם מגדירים מאפיין content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

השדה content יכול להיות כל מחרוזת – גם מחרוזת ריקה – אבל חשוב לזכור שקורא מסך יקרא כל מחרוזת שאינה מחרוזת ריקה. אפשר להוסיף תמונה url, שתכניס תמונה במידות המקוריות שלה, כך שלא תוכלו לשנות את הגודל שלה. אפשר גם להוסיף counter.

אחרי שיוצרים את האלמנט ::before או ::after, אפשר לעצב אותו איך שרוצים בלי הגבלות. אפשר להוסיף רק רכיב ::before או ::after לרכיב שיקבל רכיבי צאצא (רכיבים עם עץ מסמך), כך שרכיבים כמו <img />, <video> ו-<input> לא יפעלו.

::first-letter

פגשנו את הרכיב המדומה הזה בתחילת השיעור. חשוב לדעת שלא ניתן להשתמש בכל נכסי CSS כשמטרגטים את ::first-letter. המאפיינים הזמינים הם:

  • color
  • background נכסים (כמו background-image)
  • border נכסים (כמו border-color)
  • float
  • font מאפייני (כמו font-size ו-font-weight)
  • מאפייני טקסט (כגון text-decoration ו-word-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

הרכיב המדומה של ::first-line יאפשר לעצב את שורת הטקסט הראשונה רק אם לאלמנט שהוחל ::first-line יש ערך display של block, inline-block, list-item, table-caption או table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

בדומה לרכיב המדומה ::first-letter, יש רק קבוצת משנה של מאפייני CSS שתוכלו להשתמש בהם:

  • color
  • background מלונות
  • font מלונות
  • text מלונות

::backdrop

אם יש לכם רכיב שמוצג במצב מסך מלא, כמו <dialog> או <video>, אתם יכולים לעצב את תמונת הרקע – את השטח שבין הרכיב לבין שאר הדף – באמצעות פסאודו-רכיב ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

הרכיב המדומה ::marker מאפשר לעצב את התבליט או המספר בפריט ברשימה או בחץ של רכיב <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

יש תמיכה רק בקבוצת משנה קטנה של נכסי CSS עבור ::marker:

  • color
  • content
  • white-space
  • font מלונות
  • animation ו-transition נכסים

ניתן לשנות את סמל הסמן באמצעות המאפיין content. לדוגמה, אפשר להשתמש באפשרות הזו כדי להגדיר סימני פלוס ומינוס למצבים הסגורים והריקים של רכיב <summary>.

::selection

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

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

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

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

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

  • color
  • background-color אבל לא background-image
  • text מלונות

::placeholder

תמיכה בדפדפן

  • 57
  • 79
  • 51
  • 10.1

מקור

אפשר להוסיף רמז מסייע לרכיבים כמו <input> עם המאפיין placeholder. הרכיב המדומה של ::placeholder מאפשר לסגנן את הטקסט הזה.

input::placeholder {
  color: darkcyan;
}

השדה ::placeholder תומך רק בקבוצת משנה של כללי CSS:

  • color
  • background מלונות
  • font מלונות
  • text מלונות

::cue

תמיכה בדפדפן

  • 26
  • 79
  • 55
  • 7

מקור

הסיור האחרון בפסאודו-רכיבים הוא הרכיב המדומה ::cue. כך תוכלו לעצב את אותות ה-WebVTT, שהם הכתוביות של רכיב <video>.

ניתן גם להעביר בורר לתוך ::cue, שמאפשר לעצב רכיבים ספציפיים בתוך כיתוב.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

בחינת ההבנה

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

אילו מהפריטים הבאים אינם פסאודו-רכיבים?

::before
לא לשכוח להוסיף content: '';.
::first-paragraph
לא קיים ב-CSS.
::after
לא לשכוח להוסיף content: '';.
::marker
זהו רכיב התבליט כשמשתמשים ברכיב רשימה או בסוג תצוגה.
::pencil
לא קיים ב-CSS.
:active
זהו פסאודו-מחלקה ולא פסאודו-רכיב.

ניתן למצוא פסאודו-רכיבים בקובץ HTML.

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