מחשבים

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

selector:pseudo-class {property:value;}

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

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

נדגים:

ml>





Unvisited link.

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

בואו ננסה להוסיף עוד פסאודו קלאסים:

ml>





Unvisited link.

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

שימו לב שסדר הפסאודו קלאסים הוא קריטי, hover חייב לבוא אחרי link וvisited וactive חייב לבוא אחרי hover.

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

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

Bla bla
Second bla bla

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

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

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

נעשה זאת כך:

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

את הפסאודו קלאס הזה אנחנו רושמים בצורה קצת שונה.
אנחנו רושמים תחילה את הסלקטור שבו נמצא האלמנט שאנחנו רוצים לשנות, אחריו, אנחנו מוסיפים את הסימן < ולאחר מכן את האלמנט שאנחנו רוצים שישתנה (רק הראשון). לבסוף מוסיפים נקודותיים ואת הפסאודו קלאס first child.

p > b:first-child

כעת בתוך אלמנט הפסקה ישתנה רק האלמנט bold הראשון.

ניתן לשנות גם את האות הראשונה בכל אלמנט בעזרת הפסאודו אלמנט :
first-letter

וניתן גם לשנות את השורה הראשונה בכל אלמנט בעזרת פסאודו-אלמנט שנקרא:
first-line

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

לדוגמא:

A text box:

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

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