26 בספט׳ 2012

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

All types of pseudo class and elements

פסאודו class/elemets בcss


הקדמה


כולם מכירים פסאודו class/elemets בcss, גם אם אתם לא מכירים את המונח, סביר להניח שהשתמשתם בו גם בלי להבין.
פסאודו class המוכר ביותר הוא hover, כן התוספת שבאה אחרי class רגיל עם נקודתיים, ה hover מייצג את הstyles שיתרחשו במידה ונעבור מעל אלמנט מסוים במעבר עכבר.
דוגמא:
a{color:red;}
a:hover{color:green;}
מה שיקרה, תגיות ה 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)

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


פסאודו אחרים

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

סיכום

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


מאמר קשור:



זהוא! מקווה שנהניתם, במידה ואתם אוהבים את ה tutorials שאני כותב, אשמח שתצטרפו לרשימת הקוראים שלי בפייסבוק ע"י לחיצה על לייק כאן

תודה,
אלעד שכטר