The CSS Podcast - 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-last-child() ו-:nth-last-of-type() מתחילה מהסוף ולא מההתחלה.
אפשר להעביר יותר מאינדקס אחד גם למחלקות פסאודו האלה. אם רוצים לבחור את כל האלמנטים הזוגיים, אפשר להשתמש ב-: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() ו-:nth-last-child() תומכים גם בתחביר 'of S' שמאפשר לסנן את ההתאמות באמצעות בורר, בדומה ל-:nth-of-type(). הפונקציה li:nth-of-type(even) שוות ערך לפונקציה :nth-child(even of li). המסנן :nth-of-type מאפשר סינון רק לפי סוג הרכיב (למשל li או p), אבל התחביר 'of S' מאפשר סינון לפי כל סלקטור.
אם יש לכם טבלה, יכול להיות שתרצו להוסיף פסים לכל שורה שנייה. אפשר להשתמש ב-tr:nth-child(even) כדי לטרגט כל שורה שנייה, אבל זה לא יעבוד אם מסננים חלק מהשורות. אם מטמיעים סינון באמצעות המאפיין hidden, אפשר להוסיף of :not([hidden]) לבורר כדי לסנן מראש את הפריטים המוסתרים לפני בחירת השורות הזוגיות.
tr:nth-child(even of :not([hidden])){ background: lightgrey; } אתם יכולים להתנסות בסוג הזה של בורר בכלי לבדיקת nth-child או בכלי לבחירת כמות.
:only-of-type
לבסוף, אפשר למצוא את הרכיב היחיד מסוג מסוים בקבוצת רכיבים מאותו סוג באמצעות :only-of-type. האפשרות הזו שימושית אם רוצים לבחור רשימות עם פריט אחד בלבד, או אם רוצים למצוא את הרכיב המודגש היחיד בפסקה.
חיפוש רכיבים ריקים
לפעמים כדאי לזהות רכיבים ריקים לחלוטין, ויש גם פסאודו-סיווג בשביל זה.
:empty
אם לרכיב אין רכיבי צאצא, פסאודו-המחלקות :empty חלות עליו. אבל ילדים הם לא רק רכיבי HTML או צמתי טקסט: הם יכולים להיות גם רווחים לבנים, מה שיכול להיות מבלבל כשמנסים לנפות באגים ב-HTML הבא ותוהים למה הוא לא פועל עם :empty:
<div> </div> הסיבה לכך היא שיש רווח לבן בין התג הפותח <div> לתג הסוגר, ולכן התג :empty לא יעבוד.
הסיווג הווירטואלי :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; } :has()
מה קורה אם רוצים להגדיר סגנון לאלמנטים על סמך מה שכלול בתוכם? אפשר להשתמש במחלקת הפסאודו :has() כדי לעשות את זה. לדוגמה, יכול להיות שתרצו להחיל סגנונות על לחצנים שכוללים סמלים.
button:has(svg) { /* ... */ } בהגדרה הבסיסית ביותר, כמו בדוגמה הקודמת, אפשר לחשוב על :has() כעל בורר הורה. אפשר גם להשתמש בבורר ההורה התואם בשילוב עם בוררים אחרים כדי לטרגט רכיבים אחרים.
form:has(input:valid) label { font-weight: bold; } form:has(input:valid) label::after { content: "✅"; } בדוגמה הזו אנחנו מחילים סגנונות על רכיב התווית ועל פסאודו-אלמנט label::after כשהקלט בטופס הוא פסאודו-מחלקה valid.
אי אפשר להטמיע את פסאודו-המחלקות :has() בתוך פסאודו-מחלקות אחרות :has(), אבל אפשר לשלב אותן עם פסאודו-מחלקות אחרות.
:is(h1, h2, h3):has(a) { /* ... */ } רשימת הבוררים לא סלחנית, ולכן אם יש ברשימה בוררים לא תקינים, המערכת תתעלם מכל כללי הסגנון.
.my-element:has(img, ::before) { /* any styles here will be discarded since pseudo elements can't be included in the :has() selector list */ } בדיקת ההבנה
בודקים את הידע שלכם לגבי מחלקות פסאודו
מחלקות פסאודו פועלות כאילו מחלקה הוחלה באופן דינמי על רכיב, בעוד שרכיבי פסאודו פועלים על הרכיב עצמו.
: יחיד או כפול כתו מבחין במיוחד בבורראיזו מהאפשרויות הבאות היא פסאודו-קלאס פונקציונלית?
:is():target() כדי לציין שהן מקבלות פרמטרים.:empty() כדי לציין שהן מקבלות פרמטרים.:not()אילו מהפסאודו-מחלקות הבאות נובעות מאינטראקציה של משתמש?
:hover:press:squeeze:target:focus-withinאילו מהאפשרויות הבאות הן פסאודו-מחלקות של מצב <form>?
:enabled:fresh:indeterminate:checked:in-range:loading:valid