הכל על פסאודו Pseudo Class\Element ב CSS

פסאודו class/elemets בcss

הקדמה

כולם מכירים פסאודו class/elemets בcss, גם אם אתם לא מכירים את המונח, סביר להניח שהשתמשתם בו גם בלי להבין.
פסאודו class המוכר ביותר הוא hover, כן התוספת שבאה אחרי class רגיל עם נקודתיים, ה hover מייצג את הstyles שיתרחשו במידה ונעבור מעל אלמנט מסוים במעבר עכבר.
דוגמא:

מה שיקרה, תגיות ה a יהיו בצבע אדום, ובמעבר עכבר צבע הטקסט שלהם יהפוך לירוק.

טוב אז סביר להניח שלא חידשתי לכם כלום עד עכשיו! אז כאן אני רוצה להיכנס לתמונה יש כיום כל כך הרבה אפשריות חדשות בפסאודו class/elemets עם כניסת ה CSS3, החלטתי שאני ירכז כאן את כל המגוון שלהם, אז תנשמו עמוק מתחילים…

פסאודו ללינקים

  • link - מסמן את כל הלינקים שקיים להם ה attribute של href.
  • visited - מסמן את כל הלינקים שביקרת בהם בדפדפן (לפי ההיסטוריה של הדפדפן).
  • active - מסמן לינק שאתה במצב לחיצה עליו או בפוקוס(די לא שימושי) .
  • hover - מסמן לינקים שאתה במעבר עכבר אליהם. נכון להיום ניתן להשתמש בפסאודו מסוג זה לכל אלמנט!
  • target - אחד החזקים (קיים החל מ CSS3) מסמן אלמנטים שאליהם ביצעתם הפנייה (דוגמא) – תלחצו על הטאבים, וראו איך מוצג התוכן הרלוונטי, הגדרתי שמוצג רק תוכן שבוצעה אליו הצבעה, לדוגמא. בנוסף, דוגמאות  וpost לשימוש מתקדם יותר : “גלריית תמונות ב CSS בלבד! ע”י שימוש בפסאודו קלאס target“.

פסאודו לטקסטים

  • first-letter – כשמו כן הוא, ישפיע רק על האות הראשונה, כך שניתן לשחק לדוגמא בפסקה עם גודל האות הראשונה ,ראו דוגמא.
  • first-line – כשמו כן הוא, ישפיע רק על השורה הראשונה, כך שניתן לשחק ב style של השורה הראשונה בפסקה מסוימת, ראו דוגמא.
  • before after - מאפשר לשים תוכן לפני או אחרי,בהתאמה, לאלמנטים טקסטואליים, קיים כבר מאקספלורר 7, אך רק מאקספלורר 8 ניתן גם לטעון תמונות. מאוד שימושי כדי לשים טקסטים שאנחנו רוצים שמנוע חיפוש לא יסרוק. ראו דוגמא למימוש כ breadcrumbs. (בנוסף מאמר מורחב בנושא: פסאודו אלמנט before & after והעוצמה שחבויה בהם! )
  • first-child – מאפשר לבחור את האלמנט הראשון מסוג מסוים  מאוד שימושי באלמנטים חוזרים לדוגמת רשימות, והיתרון הגדול שנתמך כבר מאקספלורר 7, כדאי להשתמש בו בהיררכיה יחסית, לדומא כל li ראשון שנמצא בתוך ul, ולא בכל li ראשון, כי אז אתם תבחרו רק את הראשון בכל הדף,ראו דוגמא לשימוש נכון.
  • last-child – מאפשר לבחור כל אלמנט אחרון מסוג מסוים, המשלים של first-child, חסרונו הגדול שבשונה מ first-child, הוא נתמך רק מ CSS3, מה שאומר רק מאקספלורר 9 וכל שאר הדפדפנים.
  • nth-child – מאפשר לבחור בצורה חכמה אלמנטים לפי נוסחאות  בעזרת נוסחאות עם השימוש באות N, לדוגמא 3n יתן לנו כל אלמנט שלישי, אך מה שיותר יפה, ניתן לתת פשוט מספר בסוגריים ובעצם לבחור את האלמנט ה5 הספציפי לדוגמא מתוך רשימה,או שניתן לתת לו ערכים even ו odd(זוגי או אי-זוגי), ולהשפיע ככה על העיצוב,דוגמא למימוש.(קיים החל מ CSS3)
  • only-child – מאפשר לבחור לדוגמא אייטם ברשימה שהוא היחיד בא. טוב לשימוש במידה ויוצרים רשימות דינמיות  ורוצים להשפיע רק על רשימות עם אייטם אחד, דוגמא למימוש.(קיים החל מ CSS3)
  • empty - מאפשר לבחור אלמנטים אשר ריקים מתוכן, דוגמא למימוש.(קיים החל מ CSS3)
  • nth-last-child -מאפשר לבחור אלמנטים ע”י ספירה מהסוף, לדוגמא האלמנט השלישי מהסוף, דוגמא למימוש.(קיים החל מ CSS3)
  • nth-of-type – דומה מאוד ל nth-child, עם הבדלים קטנים, לטעמי מאוד לא שימושי, למי שבכל זאת מעוניין לדעת עוד, ראו את הכתבה ב css-trcks.,קיימים מסוגו נוספים בסגנון כגון nth-last-of-type, first-of-type, last-of-type ו only-of-type.(קיים החל מ CSS3)
  • selection - אחד מיוחד, יש לכתוב אותו בשונה מהאחרים עם פעמיים נקודתיים, משפיע על אזור סימון הטקסט,ראו דוגמא, תסמנו במעבר עכבר חלק מהטקסט, ותראו איך הוא מקבל את העיצוב שנתתי לו. (קיים החל מ CSS3)

 

פסאודו לפקדים

  • disabled - פקד במצב disabled, ראו דוגמא.(קיים החל מ CSS3)
  • enabled - פקד במצב enable טבעי, ראו דוגמא.(קיים החל מ CSS3)
  • checked - פקד במצב בחור, לשימוש בפקדים מסוג radio ו checkboxראו דוגמא.(קיים החל מ CSS3)
  • focus - פקד במצב של פוקוס, ראו דוגמא (לחצו על אחד פקדי textbox).(קיים החל מ CSS3)
  • נוספים שקיימים החל מ CSS3 הם validinvalidrequiredoptionalin-rangeout-of-range,read-onlyread-write. ראו מאמר ולידציות בטפסים ב HTML5, בשילוב עם CSS3

פסאודו אחרים

  • not - אחד המיוחדים ,מציין כל אלמנט שהוא ללא class המסויים שמופיע בסוגריים, או פסאודו class מסוים, ראו דוגמא.(קיים החל מ CSS3)
  • counter-increment – יצירת מספור חכם לפרקים ולראשי פרקים, עם אפשרות איפוס מספרים וכו, מאוד לא מוכר למרות שיכול להיות שימושי מאוד, ונתמך כבר מאקספלורר 8!, הסבר נוסףראו דוגמא.
  • root - בוחר את האלמנט הראשי בדף, שבדפי html תקניים זה תמיד יהיה תגית ה html, אין לי מושג למה זה טוב.(קיים החל מ CSS3)
  • lang - נועד לסימון אלמנטים שמוגדרים בשפה מסוימת, לא שימושי, למי שרוצה יש דף עם דוגמא.

סיכום

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

מדריכים נוספים בתחום:

זהוא! מקווה שנהניתם

על הכותב/עורך
קוראים לי אלעד שכטר, כיום עובד בחברת וואלה!, בתפקיד של ארכיטקט CSS. אוהב, אוכל ונושם CSS. לוקח את התחום הזה לקצה היכולות שלו.

    כתיבת תגובה

    האימייל לא יוצג באתר. (*) שדות חובה מסומנים

    תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">