CSS 2 Pseudo Class \ Pseudo Element

למרות שתקן CSS 2 ו-CSS 2.1 קיים כבר שנים, רק בגרסת אינטרנט אקספלורר 8 החליטו במיקרוסופט לתמוך באופן מלא ב-Pseudo class.
Pseudo Class מוכרות בחלקן הקטן לבוני אתרי אינטרנט והגיע הזמן, לאור החלשותו של הדפדפן המאד בעייתי IE6 וכניסתו של IE8 לבמה, ללמוד קצת על Pseudo Class.

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

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

:hover

:hover זה ה-Pseudo Class המוכר ביותר, שמים אותובעיקר עם anchor מהסיבה הפשוטה ש-IE6 ו-IE7 תומכות ב-:hover רק בקישור. שאר הדפדפנים וכן IE8 תומכות ב-hover על כל אלמנט. התגית הזו פשוט משנה את תכונות האלמנט במעבר של העכבר עליה.

דוגמא:

קישור להדגמת hover

#example_hover:hover
{
	color: Red;
}

:active

:active זה גם Pseudo Class מוכר שגם הוא נתמך ב-IE6 ו-IE7 רק בקישורים. הוא משנה את תכונות האלמנט כאשר הלחיצה על הכפתור מתקיימת.

דוגמא:

קישור להדגמת active

#example_active:active
{
	color: Red;
}

:link

:link Pseudo Class שנתמך על ידי IE6 ו-IE7 רק בקישורים משנה את תכונות האלמנט שטרם לחצו עליו.

דוגמא:

קישור להדגמת link

#example_link:link
{
	color: Red;
}

:visited

:visited דומה ל-link: והיא רלוונטית רק לתכונות האלמנט שכבר לחצו עליו.

דוגמא:

קישור להדגמת visited

#example_visited:visited
{
	color: Red;
}

:focus

:focus נתמך רק ב-IE8 והוא מאפשר לשנות את העיצוב לקישור שיש עליו פוקוס. פוקוס, בשונה מ-hover משמש בעיקר כאלו שלא יכולים להשתמש בעכבר או באמצעי הצבעה כלשהו.

דוגמא:

קישור להדגמת focus

#example_focus:focus
{
	color: Red;
}

:first-child

Pseudo Element זה נתמך רק ב-IE7 ומעלה וגם זה בתנאי שיוצרים HTML שבו יש DOCTYPE תקין.
מה שהוא עושה זה לשנות אלמנט שהוא הראשון מבין אלו מהסוג שלו. כך למשל פריט ראשון ברשימה כלשהי או הפסקה הראשונה בדף, או הפסקה הראשונה בתוך div מסוים.

דוגמא:

• פריט ראשון
• פריט שני
• פריט שלישי

#example_first_child li:first-child
{
	color: Red;
}

:lang

זה Pseudo Element באמת אקזוטי שממעטים מאד להשתמש בה והאמת היא שאני עוד לא ראיתי שימוש מעשי בו באיזשהו אתר. מה שהוא עושה זה מאפשרת עיצובים שונים לשפות שונות על פי תגית ה-lang של האלמנט. כיוון שמעטים מכירים את תגית ה-lang, שלא לדבר על להשתמש בה, אז מעטים מכירים אותה. היא תואמת לדפדפן IE7 ומעלה.

דוגמא:

פסקת דוגמא שהעיצוב שלה יעבוד רק לשפה en

#example_lang:lang(en) {
   color: red;
}

:first-line

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

דוגמא:

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

#example_first_line:first-line
{
	color: Red;
}

:first-letter

Pseudo Class זה מאפשר לנו לשנות את העיצוב של האות הראשונה באלמנט. שימושי מעט באנגלית אך בעברית קצת פחות.

דוגמא:

פסקת דוגמא

#example_first_letter:first-letter
{
	color: Red;
}

:before \ :after

קיבצתי את שני ה-Pseudo Elements האלו באותו מקום כי הן זהות כמעט לחלוטין, הן נתמכות רק ב-IE8 החדש (וכמובן בשאר דפדפני האינטרנט הנורמליים) ומשמשות להכנסת תוכן. אפשר להכניס כל תוכן: תמונה לפני כל פסקה או כותרת, אפילו קישור או טקסט לפני סלקטור כלשהו. למה זה שימושי? להמון דברים, תמונות לפני טקסט למשל. תחשבו שלפני כל קישור שיש לו id="pdf_link" יהיה אפשר לשים תמונה קטנה של אייקון PDF עם כיתוב קטן המסביר על הפורמט והכל באמצעות CSS בלבד! רוצים לשנות את הטקסט? לשנות את התמונה? קל ואלגנטי!

איך משתמשים?

באמצעות תכונת content. אני יכול להוסיף סתם טקסט content:"Example Text" או url לתמונה או קובץ כלשהו – כך למשל content:"icon.jpg".

דוגמא:

זו פסקת דוגמא שנכנס לפניה טקסט

#example_before:before
{
	content: "EXAMPLE TEXT ";   
}

דוגמא נוספת:

זו פסקת דוגמא שנכנסת אחריה תמונה

#example_after:after
{
	content: url("icon.jpg");   
}