פסאודו מחלקות ב - CSS

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

First Child pseudo class

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

דמוי מחלקה זה מאפשר להחיל משפטי CSS על האלמנט המקנן הראשון של אלמנט אב כלשהו. בדוגמה הבאה למשל אראה כיצד נשתמש בתכונה זו כדי לגרום לכך שהטקסט בפסקה הראשונה בתוך אלמנט <div> יהיה בצבע אדום:

div > p:first-child { color: red }

Link and Visited pseudo classes

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

1. link - קישורים שהמשתמש לא ביקר בהם.

2. visited - קישורים שהגולש ביקר בהם.

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

a:visited {color: green}
a:link {color: red}

כהשלמה לפרק זה במדריך מומלץ לקרוא את הפרק אודות עיצוב קישורים בעזרת CSS במדריך זה וכן את הפרקים אודות האלמנט <a> במדריך השלם לשפת HTML 5 באתר זה.


Hover, Active, Focus

שלושת הפסאודו מחלקות הבאות: hover, active, focus מהווים יחדיו חטיבה משלימה לשתי הפסאודו מחלקות link ו - visited וביחד חמשת המחלקות הללו מעניקות לנו שליטה עיצובית מלאה על המראה של קישורים בדפי האינטרנט שלנו.

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


a:hover{text-decoration:underline;background-color:red;color:yellow;}
a:active{text-decoration:none;background-color:blue;color:white;}
a:focus{text-decoration:none;background-color:blue;color:white;}

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

  1. Hover: יפעל כאשר נעביר את סמן העכבר מעל הקישור שלנו.
  2. Active: יפעל כאשר נקליק על הקישור שלנו ונשאיר את העכבר לחוץ.
  3. Focus: יפעל כאשר הפוקוס בדף יעבור לקישור.
 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש