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

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

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

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

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

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

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

: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 בביטוי הזה הוא האינדקס, שמתחיל באפס, ו-3 (3n) הוא כמות הכפלת האינדקס הזה.

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

תוכלו לשחק עם הבורר מהסוג הזה בכלי לבדיקת n-צאצא או בכלי הזה לבורר כמות.

: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;
}

בדיקת ההבנה

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