The CSS Podcast - 014: Pseudo-Elementments
אם יש לכם כתבה של תוכן ואתם רוצים שהאות הראשונה תהיה גדולה הרבה יותר – איך עושים את זה?
ב-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.