פסאודו אלמנטים ב-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.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (4 הצבעות, ממוצע: 4.75 מתוך 5)

תגיות: פורסם בקטגוריה: CSS3

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

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