מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)

שלבים

1. 1

   שלב 1

   בכדי להגדיר פסאודו קלאס, יש להגדיר אותו כך:
2. 2

   שלב 2

   selector:pseudo-class {property:value;}
4. 3

   שלב 3

   לפני שנדגים כיצד אפשר להשתמש בפסאודו קלאס, נדבר קצת על קישורים (links), לקישורים יש 4 מצבים: link - קישור שלא ביקרו בו. visited - לינק שביקרו בו. hover - כאשר עכבר עובר מעל ללינק. active - לינק שבחרנו. למה אנחנו מסבירים על לינקים פתאום? הסיבה לכך היא שאפשר לשחק עם כל אחד מהמצבים האלה בעזרת הפסאודו קלאסים. נדגים:
5. 4

   שלב 4

   
   ml> a:link {color:blue;}

   Unvisited link.

6. 5

   שלב 5

   
   שימו לב למבנה השורה של הפסאודו קלאס בדוגמא: הגדרנו לסלקטור a (קישור) את הפסאודו קלאס link והגדרנו לו את חוק הCSS שאומר color:blue. כלומר קישור שלא ביקרו בו בדף יהיה בצבע כחול (באותה מידה יכולנו לשנות לכל צבע אחר). בואו ננסה להוסיף עוד פסאודו קלאסים:
7. 6

   שלב 6

   ml> a:link {color:blue;} a:visited {color:red;} a:hover {color:green;} a:active {color:yellow;}

   Unvisited link.

8. 7

   שלב 7

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

   שלב 8

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

    שלב 9

    
    בעזרת p:first-child הגדרנו כי הפסקה הראשונה תהיה צבועה בירוק וכל פסקה אחריה תהיה בעיצוב ברירת המחדל שלה. כמו כן, הגדרנו doctype בכדי לאפשר לפסאודו קלאס הזה לעבוד בכל הדפדפנים.
11. 10

    שלב 10

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

    שלב 11

    
    p > b:first-child { color:green; }

    This is the first bold element and this is the second bold element.

13. 12

    שלב 12

    
    את הפסאודו קלאס הזה אנחנו רושמים בצורה קצת שונה. אנחנו רושמים תחילה את הסלקטור שבו נמצא האלמנט שאנחנו רוצים לשנות, אחריו, אנחנו מוסיפים את הסימן < ולאחר מכן את האלמנט שאנחנו רוצים שישתנה (רק הראשון). לבסוף מוסיפים נקודותיים ואת הפסאודו קלאס first child. p > b:first-child כעת בתוך אלמנט הפסקה ישתנה רק האלמנט bold הראשון. ניתן לשנות גם את האות הראשונה בכל אלמנט בעזרת הפסאודו אלמנט : first-letter וניתן גם לשנות את השורה הראשונה בכל אלמנט בעזרת פסאודו-אלמנט שנקרא: first-line
14. 13

    שלב 13

    פסאודו קלאס נוסף ושימושי הוא הפסאודו קלאס focus. הפסאודו קלאס הזה מאפשר לשנות את הגדרות העיצוב של שדה טקסט ברגע שנלחץ עליו בכדי להתחיל להקיש טקסט. לדוגמא:
15. 14

    שלב 14

    
    input:focus { background-color:purple; } A text box:
    
16. 15

    שלב 15

    
    לפני לחיצה על שדה הטקסט:
17. 16

    שלב 16

    
    אחרי לחיצה על שדה הטקסט (focus):
18. 17

    שלב 17

    
    p:first-child { color:green; }

    Bla bla

    Second bla bla