פסאודו אלמנטים ב - CSS

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

השורה הראשונה

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

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

p:first-line { color: red }

האות הראשונה

הפסאודו אלמנט first-letter מאפשר לנו להחיל הגדרות עיצוביות על האות הראשונה בבלוק של טקסט בתנאי שהאות הראשונה היא אכן הראשונה ולא קודמים לה אלמנטים אחרים בתוך בלוק הטקסט כגון תמונות. תכונה זו יעילה מאוד לעיצובים טיפוגרפיים מקובלים של אות ראשונה במאמר שהיא גדולה ו/או בולטת (Initial Caps):

p:first-letter { font-size: 1.5em; font-weight: bold }

לפני ואחרי

כפי ששמם מלמד הפסאודו אלמנטים: before ו - after ישמשו אותנו כדי להגדיר את מיקומו של תוכן לפני או אחרי אלמנטים שהם חלק מעץ המסמך שלנו. בדוגמה הבאה למשל נרצה להציג לפני כל אלמנט החבר במחלקה "Note" את הביטוי הבא: "הערה: " -


p.note:before { content: "הערה: " }

באותו האופן בדיוק ניתן להשתמש גם בפסאודו אלמנט after. בדוגמה הבאה נרצה להציג את הביטוי "The End" בסופם של כל האלמנטים שבתוך האלמנט <body>:

body:after {
content: "The End";
}

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש