למקרה ושכחתם: יש מצביע מיוחד לטקסט מסומן

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

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

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

דוגמא לשימוש

::selection {
    background-color: #407ab1;
    color: #ffce00;
}

פרטים טכנים

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

הסודו-אלמנט שנוצר מוגבל ומתפקד כמו אלמנט inline. ניתן להפעיל עליו 8 מאפיינים בלבד:

• color
• background-color
• cursor
• caret-color
• outline
• text-decoration
• text-emphasis-color
• text-shadow

תמיכת דפדפנים

המצביע נתמך בדפדפנים Chrome, Safari,Opera וInternet Explorer 9 ומעלה.

Firefox תומך במצביע עם סופית של -moz-, באופן הבא ::-moz-selection ולא תומך בפרמטר text-shadow.

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