פסאודו מחלקות

הפודקאסט של שירות ה-CSS - 015: Pseudo-classes

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

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

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

מצבים אינטראקטיביים

המדרגות הבאות רלוונטיות לאינטראקציה של משתמש עם הדף שלכם.

:hover

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 2.

מקור

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

:active

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 1.

מקור

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

‫:focus, :focus-within וגם :focus-visible

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 1.

מקור

אם רכיב יכול לקבל מיקוד, למשל <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

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 1.3.

מקור

:target מחלקה מדומה בוחרת רכיב שיש לו id שתואם למקטע של כתובת URL. נניח שיש לכם את קוד ה-HTML הבא:

<article id="content">
    …
</article>

אפשר לצרף סגנונות לאלמנט הזה כאשר כתובת ה-URL מכילה #content.

#content:target {
    background: yellow;
}

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

מדינות היסטוריות

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 1.

מקור

: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

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 3.1.

מקור

אם רכיב טופס, כמו <button> הושבת על ידי הדפדפן, אתם יכולים להתחבר למצב הזה :disabled פסאודו-מחלקה. :enabled פסאודו-מחלקה זמינה עבור המצב ההפוך, למרות שרכיבי טופס הם גם :enabled כברירת מחדל, לכן ייתכן שלא תגיעו לשיעור המדומה הזה.

:checked וגם :indeterminate

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 3.1.

מקור

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

המצב :checked הוא מצב בינארי(true או false), אבל תיבות סימון כוללות מצב ביניים, כאשר הן לא מסומנות או לא מסומנות. נקרא :indeterminate.

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

גם לרכיב <progress> יש מצב לא קבוע שניתן לעצב. תרחיש לדוגמה נפוץ הוא לתת לו מראה מפוספס כדי לציין שלא ידוע כמה כסף צריך עוד.

:placeholder-shown

תמיכה בדפדפן

  • Chrome: 47.
  • קצה: 79.
  • Firefox: 51.
  • Safari: 9.

מקור

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

מצבי אימות

תמיכה בדפדפן

  • Chrome: 10.
  • קצה: 12.
  • Firefox: 4.
  • Safari: 5.

מקור

אתם יכולים להגיב לאימות טופס HTML באמצעות מחלקות פסאודו כמו :valid :invalid והקבוצה :in-range. המחלקות :valid ו-:invalid שימושיות להקשרים כמו שדה אימייל שיש בו pattern שצריך להתאים, יהיה שדה חוקי. אפשר להציג למשתמש את המצב החוקי הזה של הערך, ולעזור להם להבין שהם יכולים לעבור בבטחה לשדה הבא.

המחלקה המדומה :in-range זמינה אם לקלט יש min וגם max, כמו קלט מספרי, והערך נמצא בתוך הגבולות האלה.

בטופסי HTML, אפשר לקבוע ששדה מסוים הוא שדה חובה בעזרת המאפיין required. :required פסאודו-מחלקה תהיה זמינה בשדות החובה. אפשר לבחור שדות שלא נחוצים באמצעות הפקודה :optional פסאודו-מחלקה.

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

יש קבוצה של מחלקות מדומה שבוחרת פריטים לפי המיקום שלהם במסמך.

:first-child וגם :last-child

תמיכה בדפדפן

  • Chrome: 4.
  • קצה: 12.
  • Firefox: 3.
  • Safari: 3.1.

מקור

כדי למצוא את הפריט הראשון או האחרון, אפשר להשתמש :first-child ו- :last-child המחלקות המדומה האלה יחזירו את הרכיב הראשון או האחרון בקבוצה של רכיבים אחים.

:only-child

תמיכה בדפדפן

  • Chrome: 2.
  • קצה: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

מקור

אפשר גם לבחור ברכיבים שאין להם אחים, עם :only-child פסאודו-מחלקה.

:first-of-type וגם :last-of-type

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

מקור

אפשר לבחור :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

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

מקור

אתם לא מוגבלים גם לילד או לילדה הראשונים והאחרונים ולסוגים של הילדים. :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

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

מקור

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

איך לאתר רכיבים ריקים

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

:empty

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 3.1.

מקור

אם לרכיב אין צאצאים, מחלקה מדומה :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()

תמיכה בדפדפן

  • Chrome: 88.
  • קצה: 88.
  • Firefox: 78.
  • Safari: 14.

מקור

אם רוצים למצוא את כל רכיבי הצאצא h2, li ו-img ברכיב .post, אפשר לכתוב רשימת בוררים כך:

.post h2,
.post li,
.post img {
    …
}

עם :is() פסאודו-מחלקה, אפשר לכתוב גרסה קומפקטית יותר:

.post :is(h2, li, img) {
    …
}

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

:not()

תמיכה בדפדפן

  • Chrome: 1.
  • קצה: 12.
  • Firefox: 1.
  • Safari: 3.1.

מקור

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

a:not([class]) {
    color: blue;
}

גם פסאודו-מחלקה של :not יכולים לעזור לכם לשפר את הנגישות. לדוגמה, <img> חייב לכלול alt, גם אם הוא ריק. לכן אפשר לכתוב כלל CSS שמוסיף מתאר אדום עבה לתמונות לא חוקיות:

img:not([alt]) {
    outline: 10px red;
}

בדיקת ההבנה

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

פסאודו-מחלקות פועלים כאילו מחלקה הוחלה באופן דינמי על רכיב, ואילו פסאודו-אלמנטים פועלים על הרכיב עצמו.

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

אילו מהקטגוריות הבאות הן פסאודו-מחלקה פונקציונלית?

:is()
🎉
:target
אחרי מחלקה של פסאודו לתפקד יש (), כדי לציין שהן מקבלות פרמטרים.
:empty
אחרי מחלקה של פסאודו לתפקד יש (), כדי לציין שהן מקבלות פרמטרים.
:not()
🎉

אילו מהקטגוריות הבאות נובעות מאינטראקציה עם משתמש?

:hover
🎉
:press
כדאי לנסות שוב.
:squeeze
כדאי לנסות שוב.
:target
🎉
:focus-within
🎉

אילו מהקטגוריות הבאות הן מחלקות פסאודו של מדינה ב-<form>?

:enabled
🎉
:fresh
כדאי לנסות שוב.
:indeterminate
🎉
:checked
🎉
:in-range
🎉
:loading
כדאי לנסות שוב.
:valid
🎉