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

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

first-line

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

#myText::first-line {
font-weight: bold;
}

והנה הדוגמא החיה:

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

first-letter

זהו פסאודו אלמנט שמאפשר לנו לבחור את האות הראשונה. למשל:

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

ואת זה עשיתי ככה:

#myText2::first-letter {
font-weight: bold;
font-size: 20px;
}

before

עם פסאודו אלמנט זה אני יכול להוסיף טקסט (כן, כן) לפני אלמנט מסוים. למה זה טוב? למשל לציטוטים מסוג מסוים, או לרשימות או לכל טקסט קבוע שיש לו איזו הקדמה.

למשל פסקה ("id="mypar) שבה יש מספר קישורים, אני רוצה שלפני כל קישור תופיע המילה 'קישור חיצוני'. איך אני עושה את זה? עד כה הייתי צריך להכניס את זה בקוד ה-HTML עצמו, או להשתמש ב-JavaScript. עם CSS3 אני יכול לעשות את זה בקלות ככה:

#mypar a::before {
content: "קישור חיצוני: ";
}

והנה הדוגמא החיה:

אני אוהב לגלוש באינטרנט ישראל וללמוד על דברים חדשים בCSS3.

אם תסתכלו על ה-source או ב-firebug, אתם תראו שהטקסט הזה לא ממש קיים. הוא קיים רק ב-CSS. זה שימושי למיליון דברים בערך. קו מפריד בין רשימות, או < < בניווט. כמו שיש before, יש גם after שבאמצעותו אנו מוסיפים טקסט אחרי הטקסט שנמצא בתוך האלמנט. השימוש הוא אותו שימוש. selected זה פסאודו-אלמנט מאד מגניב ששולט על העיצוב בטקסט שעשו לו highlight. הדבר הכי טוב הוא דוגמא, פשוט סמנו את הטקסט הבא:

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

איך עשיתי את הפלא הזה? ככה:

#selectMe::selection {
background-color: red;
}

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

#selectMe::-moz-selection {
background-color: red;
}

זהו! עד כאן בנוגע לפסאודו אלמנטים ב-CSS3. במאמר הבא אנו נדון בדרכים ליישם את כל הדברים הנהדרים שלמדנו גם לדפדפנים מיושנים כמו אינטרנט אקספלורר 6,7 ו-8.