הפודקאסט של שירות ה-CSS - 015: Pseudo-classes
נניח שיש לכם טופס הרשמה באימייל
אתם רוצים שהשדה בטופס האימייל יכלול גבול אדום אם הוא מכיל כתובת אימייל לא חוקית.
איך עושים את זה?
אפשר להשתמש בפסאודו-מחלקה של CSS :invalid
,
שהוא אחד מהרבה סוגים של פסאודו-מחלקות שמסופקות על ידי דפדפן.
פסאודו-מחלקה מאפשרת לכם להחיל סגנונות על סמך שינויי מצב וגורמים חיצוניים. פירוש הדבר הוא שהעיצוב יכול להגיב לקלט של משתמשים, כמו כתובת אימייל לא חוקית. הנושאים האלה מפורטים במודול הסלקטורים, והמודול הזה יסביר לכם עליהם בפירוט.
בשונה מאלמנטים מדומה, מידע נוסף עליו זמין במודול הקודם, פסאודו-מחלקות מוכנסות למצבים ספציפיים שבהם הרכיב עשוי להיות, במקום לעצב חלקים של הרכיב הזה באופן כללי.
מצבים אינטראקטיביים
המדרגות הבאות רלוונטיות לאינטראקציה של משתמש עם הדף שלכם.
:hover
אם למשתמש יש התקן הצבעה כמו עכבר או משטח מגע,
והם מציבים אותו מעל יסוד,
אפשר להתחבר למצב הזה
:hover
כדי להחיל את הסגנונות.
זוהי דרך שימושית לרמוז על כך שאפשר לקיים אינטראקציה עם אלמנט.
:active
המצב הזה מופעל כאשר קיימת אינטראקציה פעילה עם רכיב – כמו קליק – לפני שהקליק משוחרר. אם משתמשים באמצעי הצבעה כמו עכבר, מצב זה מתייחס למועד שבו הקליק מתחיל ועדיין לא שוחרר.
:focus
, :focus-within
וגם :focus-visible
אם רכיב יכול לקבל מיקוד, למשל <button>
אפשר להגיב למצב הזה באמצעות
:focus
פסאודו-מחלקה.
אפשר גם להגיב אם רכיב צאצא של הרכיב מקבל מיקוד עם
:focus-within
אלמנטים שניתן להתמקד בהם, כמו לחצנים, תגרום להצגת טבעת התמקדות כשהם בפוקוס – אפילו אם ילחצו עליהם. במצב כזה, המפתח יחיל את שירות ה-CSS הבא:
button:focus {
outline: none;
}
שירות ה-CSS הזה מסיר את טבעת המיקוד של הדפדפן שמוגדרת כברירת מחדל כשרכיב מסוים מקבל מיקוד.
מצב כזה מציג בעיית נגישות למשתמשים שמנווטים בדף אינטרנט באמצעות מקלדת.
אם אין סגנון התמקדות,
הם לא יוכלו לעקוב אחר המיקוד הנוכחי של המשתמש כאשר משתמשים במקש Tab.
עם :focus-visible
אפשר להציג סגנון התמקדות כשאלמנט מקבל מיקוד באמצעות המקלדת,
וגם משתמשים בכלל outline: none
כדי למנוע אינטראקציה של מכשיר מצביע (עכבר).
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
:target
מחלקה מדומה בוחרת רכיב שיש לו id
שתואם למקטע של כתובת URL.
נניח שיש לכם את קוד ה-HTML הבא:
<article id="content">
…
</article>
אפשר לצרף סגנונות לאלמנט הזה כאשר כתובת ה-URL מכילה #content
.
#content:target {
background: yellow;
}
האפשרות הזו שימושית להדגשת אזורים שייתכן שהיו קשורים אליהם באופן ספציפי, כמו התוכן העיקרי באתר, באמצעות קישור לדילוג למקום מסוים בדף.
מדינות היסטוריות
:link
:link
אפשר להחיל את המחלקה המדומה על כל רכיב <a>
שיש לו ערך href
שטרם שלו ביקר בו.
:visited
אפשר לעצב קישור שהמשתמש כבר ביקר בו באמצעות
:visited
פסאודו-מחלקה.
זה המצב ההפוך ל-:link
, אבל יש פחות מאפייני CSS שאפשר להשתמש בהם
מסיבות אבטחה.
אפשר לעצב רק color
, background-color
,
border-color
, outline-color
והצבע של SVG fill
ו-stroke
.
הסדר חשוב
אם מגדירים סגנון :visited
,
אפשר לשנות אותו באמצעות מחלקה מדומה של קישור עם ספציפיות שווה לפחות.
לכן,
מומלץ להשתמש בכלל LVHA כדי לעצב קישורים עם פסאודו-מחלקות בסדר מסוים:
:link
, :visited
, :hover
, :active
.
a:link {}
a:visited {}
a:hover {}
a:active {}
מצבי טופס
המחלקות המדומה הבאות יכולות לבחור רכיבי טופס, במצבים השונים שבהם הרכיבים האלה עשויים להיות במהלך האינטראקציה איתם.
:disabled
וגם :enabled
אם רכיב טופס,
כמו <button>
הושבת על ידי הדפדפן,
אתם יכולים להתחבר למצב הזה
:disabled
פסאודו-מחלקה.
:enabled
פסאודו-מחלקה זמינה עבור המצב ההפוך,
למרות שרכיבי טופס הם גם :enabled
כברירת מחדל,
לכן ייתכן שלא תגיעו לשיעור המדומה הזה.
:checked
וגם :indeterminate
:checked
פסאודו-מחלקה זמינה כאשר רכיב טופס תומך,
כמו תיבת סימון או לחצן בחירה, במצב מסומן.
המצב :checked
הוא מצב בינארי(true או false),
אבל תיבות סימון כוללות מצב ביניים, כאשר הן לא מסומנות או לא מסומנות.
נקרא
:indeterminate
.
דוגמה למצב הזה היא האפשרות 'בחירת הכול' אמצעי הבקרה לסימון כל תיבות הסימון בקבוצה. אם המשתמש היה צריך לבטל את הסימון של אחת מתיבות הסימון האלה, תיבת הסימון הבסיסית לא תייצג יותר את 'הכול' מתבצעת בדיקה, צריך להעביר אותן למצב בלתי מוגדר.
גם לרכיב <progress>
יש מצב לא קבוע שניתן לעצב.
תרחיש לדוגמה נפוץ הוא לתת לו מראה מפוספס כדי לציין שלא ידוע כמה כסף צריך עוד.
:placeholder-shown
אם שדה בטופס מכיל מאפיין placeholder
וללא ערך,
:placeholder-shown
אפשר להשתמש בפסאודו-מחלקה כדי לצרף סגנונות למצב הזה.
ברגע שיש תוכן בשדה,
בין אם הוא placeholder
או לא,
המצב הזה לא יהיה תקף יותר.
מצבי אימות
אתם יכולים להגיב לאימות טופס HTML באמצעות מחלקות פסאודו כמו
:valid
:invalid
והקבוצה
:in-range
.
המחלקות :valid
ו-:invalid
שימושיות להקשרים
כמו שדה אימייל שיש בו pattern
שצריך להתאים,
יהיה שדה חוקי.
אפשר להציג למשתמש את המצב החוקי הזה של הערך,
ולעזור להם להבין שהם יכולים לעבור בבטחה לשדה הבא.
המחלקה המדומה :in-range
זמינה אם לקלט יש min
וגם max
,
כמו קלט מספרי, והערך נמצא בתוך הגבולות האלה.
בטופסי HTML,
אפשר לקבוע ששדה מסוים הוא שדה חובה בעזרת המאפיין required
.
:required
פסאודו-מחלקה תהיה זמינה בשדות החובה.
אפשר לבחור שדות שלא נחוצים באמצעות הפקודה
:optional
פסאודו-מחלקה.
בחירת רכיבים לפי האינדקס, הסדר והמופע שלהם
יש קבוצה של מחלקות מדומה שבוחרת פריטים לפי המיקום שלהם במסמך.
:first-child
וגם :last-child
כדי למצוא את הפריט הראשון או האחרון,
אפשר להשתמש
:first-child
ו-
:last-child
המחלקות המדומה האלה יחזירו את הרכיב הראשון או האחרון בקבוצה של רכיבים אחים.
:only-child
אפשר גם לבחור ברכיבים שאין להם אחים,
עם
:only-child
פסאודו-מחלקה.
:first-of-type
וגם :last-of-type
אפשר לבחור
:first-of-type
ו-
:last-of-type
שבהתחלה,
נראה שהם עושים את אותו הדבר כמו :first-child
ו-:last-child
, אבל נבחן את קוד ה-HTML הבא:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
ושירות ה-CSS הזה:
.my-parent div:first-child {
color: red;
}
אף רכיב לא ייצבע באדום כי הצאצא הראשון הוא פסקה ולא div.
המחלקה המדומה :first-of-type
מועילה בהקשר הזה.
.my-parent div:first-of-type {
color: red;
}
למרות ש<div>
הראשון הוא הילד השני,
הוא עדיין הראשון מסוג ברכיב .my-parent
,
בהתאם לכלל הזה, הוא ייצבע באדום.
:nth-child
וגם :nth-of-type
אתם לא מוגבלים גם לילד או לילדה הראשונים והאחרונים ולסוגים של הילדים.
:nth-child
וגם
:nth-of-type
פסאודו-מחלקות מאפשרות לציין רכיב שנמצא באינדקס מסוים.
ההוספה לאינדקס בסלקטורים ב-CSS מתחילה ב-1.
תוכלו גם להעביר למחלקות המדומה האלה יותר מאינדקס.
אם רוצים לבחור את כל הרכיבים הזויים, אפשר להשתמש בפונקציה :nth-child(even)
.
ניתן גם ליצור סלקטורים מורכבים יותר שמוצאים פריטים במרווחי זמן קבועים, באמצעות המיקרו-תחביר An+B.
li:nth-child(3n+3) {
background: yellow;
}
הבורר הזה בוחר כל פריט שלישי,
החל מפריט 3.
ה-n
בביטוי הזה הוא האינדקס,
שמתחיל ב-0, ה-3 (3n
) הוא המכפיל של המדד הזה.
נניח שיש לך 7 פריטים של <li>
.
הפריט הראשון שנבחר הוא 3, כי המשמעות של 3n+3
היא (3 * 0) + 3
.
באיטרציה הבאה נבחר פריט 6, כי n
עלה ל-1
,
אז (3 * 1) + 3)
.
הביטוי הזה פועל גם ב-:nth-child
וגם ב-:nth-of-type
.
אפשר לשחק עם בורר מהסוג הזה nth-child Tester או הכלי לבחירת כמות.
:only-of-type
ולבסוף, ניתן למצוא את הרכיב היחיד מסוג מסוים בקבוצת אחיות אחות עם
:only-of-type
האפשרות הזו שימושית אם רוצים לבחור רשימות שכוללות פריט אחד בלבד,
או אם ברצונך למצוא את הרכיב המודגש היחיד בפסקה.
איך לאתר רכיבים ריקים
לפעמים כדאי לזהות רכיבים ריקים לחלוטין, ויש גם מחלקה מדומה בשביל זה.
:empty
אם לרכיב אין צאצאים,
מחלקה מדומה :empty
חלה עליהם.
אבל ילדים הם לא רק רכיבי HTML או צמתים של טקסט: הם יכולים גם לכלול רווחים לבנים,
מצב כזה עלול לבלבל במהלך ניפוי הבאגים של ה-HTML הבא ותהית למה הוא לא עובד עם :empty
:
<div>
</div>
הסיבה לכך היא שיש רווחים לבנים בין הערך הפותח ל-<div>
הסוגר,
כך שריקון לא יעבוד.
המחלקה המדומה :empty
יכולה להיות שימושית אם יש לכם מעט שליטה ב-HTML ואתם רוצים להסתיר רכיבים ריקים.
כמו עורך תוכן WYSIWYG.
כאן, עורך הוסיף פסקה ריקה וריה.
<article class="post">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
<p></p>
<p>Curabitur blandit tempus porttitor.</p>
</article>
באמצעות :empty
אפשר למצוא ולהסתיר אותו.
.post :empty {
display: none;
}
איתור והחרגה של רכיבים מרובים
יש מחלקות לכאורה עוזרות לכתוב CSS קומפקטי יותר.
:is()
אם רוצים למצוא את כל רכיבי הצאצא h2
, li
ו-img
ברכיב .post
,
אפשר לכתוב רשימת בוררים כך:
.post h2,
.post li,
.post img {
…
}
עם :is()
פסאודו-מחלקה, אפשר לכתוב גרסה קומפקטית יותר:
.post :is(h2, li, img) {
…
}
המחלקה המדומה :is
היא לא רק קומפקטית יותר מרשימת בוררים, אלא היא גם סלחנית יותר.
ברוב המקרים,
אם יש שגיאה או בורר שאינו נתמך ברשימת בוררים,
כל רשימת הבוררים לא תפעל יותר.
אם יש שגיאה בבוררים שהועברו במחלקה מדומה של :is
,
המערכת תתעלם מהבורר הלא חוקי, אבל תשתמש בבוררים החוקיים.
:not()
אפשר גם להחריג פריטים עם
:not()
פסאודו-מחלקה.
לדוגמה, אפשר להשתמש בו כדי לעצב את כל הקישורים שאין להם מאפיין class
.
a:not([class]) {
color: blue;
}
גם פסאודו-מחלקה של :not
יכולים לעזור לכם לשפר את הנגישות.
לדוגמה, <img>
חייב לכלול alt
, גם אם הוא ריק.
לכן אפשר לכתוב כלל CSS שמוסיף מתאר אדום עבה לתמונות לא חוקיות:
img:not([alt]) {
outline: 10px red;
}
בדיקת ההבנה
בוחנים את הידע שלכם על פסאודו שיעורים
פסאודו-מחלקות פועלים כאילו מחלקה הוחלה באופן דינמי על רכיב, ואילו פסאודו-אלמנטים פועלים על הרכיב עצמו.
אילו מהקטגוריות הבאות הן פסאודו-מחלקה פונקציונלית?
:target
:is()
:not()
:empty
אילו מהקטגוריות הבאות נובעות מאינטראקציה עם משתמש?
:focus-within
:press
:squeeze
:hover
:target
אילו מהקטגוריות הבאות הן מחלקות פסאודו של מדינה ב-<form>
?
:valid
:checked
:indeterminate
:fresh
:loading
:enabled
:in-range