אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » פתרונות ומאמרים על פיתוח אינטרנט » CSS 2 Pseudo Class \ Pseudo Element

CSS 2 Pseudo Class \ Pseudo Element

רן בר-זיק מאי 7, 2009 10:54 am אין תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

למרות שתקן 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");   
}
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS בניית אתרי אינטרנט מידע למפתחים
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד