הפודקאסט של 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
אפשר להוסיף רמז מסייע לרכיבים כמו <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;
}
בחינת ההבנה
בוחנים את הידע שלכם לגבי פסאודו-אלמנטים
אילו מהפריטים הבאים אינם פסאודו-רכיבים?
::before
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
ניתן למצוא פסאודו-רכיבים בקובץ HTML.