אלמנטים מדומים – או Pseudo Elements. למה זה טוב ורשימה (כמעט) מלאה

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

האלמנטים הנפוצים ביותר

::before

כשמו כן הוא. מייצר אלמנט לפני התוכן בתוך האלמנט שאתם מטרגטים.

.parent::before {
  content: 'first content';
}

כך שהתוצאה שלנו תהיה:

<div class="parent">
  ::before
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

כפי שניתן לראות מהדוגמה, על מנת שהאלמנט יתקיים ברמת ה HTML של האתר, הוא חייב לכלול את התכונה content, גם אם הערך שלה יהיה בסופו ריק בסופו של דבר (content="").

::after

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

.parent::after {
  content: 'last content';
}

במקרה הזה, התוצאה תהיה כזאת:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  ::after
</div>

::placeholder

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

See the Pen Untitled by Yoav Shai (@yoav-shai) on CodePen.

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

::marker

בניגוד לשאר החברים שלו ברשימה הזאת, השם של האלמנט הזה פחות ברור מאליו, אבל אני בטוח שאם תשקיעו בזה כמה דקות, תצליחו אולי לחשוב מה הייעוד שלו. אבל למקרה שאין לכם כוח, או זמן, או שאולי לא הצלחתם (שזה גם בסדר גמור), ה ::marker נותן לכם את האפשרות לשלוט בסמן של רשימות לא מסודרת (ul – unordered lists). כמו שניתן לראות ברשימת הקניות שבדוגמה, בה החלטתי לתת לגביע לכל מוצר מנצח שברשימה. אפשר אפילו לקחת את השימוש בו צעד או שניים קדימה ולהתאים לכל פריט אייקון ייחודי לו באמצעות שילוב של data-attribute אם :has(), שעל שניהם נדבר בפוסטים נפרדים וייעודיים (חחח) להם.

See the Pen Marker pseudo element example by Yoav Shai (@yoav-shai) on CodePen.

::selection

אלמנטים פחות נפוצים

::first-letter

מכירים את זה שאתם פותחים ספר ישן והאות הראשונה של הפרק היא בעיצוב גדול ומרשים, עם גילופי עץ מטורפים שמתפשטים לכל עבר? אז האלמנט הזה הוא גרסת ה CSS שלהם. אתם יכולים לעשות איתו (כמעט) ככל העולה על רוחכם כדי לעצב את האות הראשונה בפסקה.

See the Pen First-letter pseudo element example by Yoav Shai (@yoav-shai) on CodePen.

::first-line

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

See the Pen Untitled by Yoav Shai (@yoav-shai) on CodePen.

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

למה שתרצו לעשות את זה? טוב, זה כבר עניין שלכם. אני לא נכנס להנאות המוזרות שלכם, ואתם אל תכנסו לשלי.