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

The CSS Podcast – 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 תוכלו לעצב את השורה הראשונה של הטקסט רק אם הערך של display ברכיב שבו הוחל ::first-line הוא 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

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

input::placeholder {
  color: darkcyan;
}

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

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

::cue

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

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

video::cue {
  color: yellow;
}

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

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

בדיקת ההבנה

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