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

The CSS Podcast – 015: Pseudo-classes

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

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

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

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

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

:hover

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Source

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

:active

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

:focus, ב:focus-within וב:focus-visible

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

אם רכיב יכול לקבל מיקוד – כמו <button> – אפשר להגיב למצב הזה באמצעות פסאודו-הקלאס :focus.

אפשר גם להגיב אם רכיב צאצא של הרכיב מקבל את המיקוד באמצעות :focus-within.

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

button:focus {
    outline: none;
}

קוד ה-CSS הזה מסיר את טבעת המיקוד שמוגדרת כברירת מחדל בדפדפן כשרכיב מקבל את המיקוד, מה שגורם לבעיה בנגישות למשתמשים שמנווטים בדף אינטרנט באמצעות מקלדת. אם לא תגדירו סגנון מיקוד, הם לא יוכלו לעקוב אחרי מיקום המיקוד הנוכחי באמצעות מקש ה-Tab. בעזרת :focus-visible אפשר להציג סגנון של מיקוד כשאלמנט מקבל מיקוד דרך המקלדת, תוך שימוש גם בכלל outline: none כדי למנוע זאת כשמכשיר צביעה יוצר איתו אינטראקציה.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.3.

Source

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

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

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

#content:target {
    background: yellow;
}

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

מצבים היסטוריים

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

אפשר להחיל את פסאודו-הקלאס :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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

:checked וגם :indeterminate

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

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

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

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

:placeholder-shown

Browser Support

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 9.

Source

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

מצבי אימות

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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

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

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

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

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

:first-child וגם :last-child

Browser Support

  • Chrome: 4.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 3.1.

Source

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

:only-child

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Source

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

אפשר לבחור את התגים :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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

אתם גם לא מוגבלים לסוגי ילדים ולסוגי ילדים אחרונים. הסיווגים המזויפים :nth-child ו-:nth-of-type מאפשרים לציין רכיב שנמצא באינדקס מסוים. הוספת הפריטים לאינדקס בסלקטורים של CSS מתחילה ב-1.

אפשר גם להעביר יותר ממדד לשכבות התרמית האלה. אם רוצים לבחור את כל הרכיבים הזוגיים, אפשר להשתמש ב-:nth-child(even).

אפשר גם ליצור בוחרים מורכבים יותר שמאתרים פריטים במרווחי זמן קבועים, באמצעות מיקרו-תחביר An+B.

li:nth-child(3n+3) {
    background: yellow;
}

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

נניח שיש לכם 7 פריטים מסוג <li>. הפריט הראשון שנבחר הוא 3 כי הערך 3n+3 מתורגם ל-(3 * 0) + 3. באיטרציה הבאה ייבחר הפריט 6 כי הערך של n הועלה עכשיו ל-1, כלומר (3 * 1) + 3). הביטוי הזה פועל גם עבור :nth-child וגם עבור :nth-of-type.

אפשר להתנסות בבורר כזה בבודק ה-nth-child או בכלי לבחירת כמות.

:only-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

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

חיפוש רכיבים ריקים

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

:empty

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

<div>
</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()

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Source

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

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

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

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

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

:not()

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

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

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

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

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

בדיקת ההבנה

בדיקת הידע שלכם בנושא פסאודו-כיתות

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

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

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

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

אילו מהפסאודו-כיתות הבאות נובעות מאינטראקציה של משתמש?

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

אילו מהאפשרויות הבאות הן פסאודו-כיתות של מצב <form>?

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