Pseudo Selectors - hover, link, visited

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

לקישורים יש כמה מצבים: קישור שטרם נלחץ, קישור שנלחץ בעבר וקישור שהעכבר נמצא מעליו. לכל אחד מהמצבים האלו ניתן לקבוע עיצוב משלו באמצעות pseudo selectors.

ראשית, נתחיל בדף HTML פשוט אשר כולל קישור:

<body>
    <h1>Pseudo selectors</h1>

    <a href="https://forums.lokipod.com">This is a link to the forums</a>
</body>

הפסאודו סלקטור hover

נתחיל בפסאודו סלקטור hover. הוא מאפשר לנו לקבוע את העיצוב של הקישור כאשר עוברים עם העכבר מעליו:

a:hover
{
   color:whitesmoke;
   background-color: brown;
}

 

hover2

 

הפסאודו סלקטורים link ו- visited

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

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

a:link
{
   color:black;
}

באמצעות הפסאודו סלקטור visited, ניתן לעצב את הקישור לאחר שלוחצים עליו.

a:visited
{
   color:whitesmoke;
   background-color: brown;
}

פסאודו-סלקטור של hover חייב להופיע אחרון

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

a:link{
color: purple
}

a:visited
{
color: blue
}

a:hover
{
color: green
}

והפסאודו סלקטור של hover מופיע אחרון משלושתם.

חשוב לציין שכמו בכל הפסאודו סלקטורים, הם יכולים להשלים כל אחד מסוגי הסלקטורים הבסיסיים. בדוגמה לעיל השתמשנו בסלקטור של סוג אלמנט (a) יחד איתם, כך שעיצבנו את כל הקישורים בדף. אם היינו נותנים לקישור id (או class), יכולנו להשתמש בפסאודו סלקטורים רק עבור ה- id (או ה- class) הזה.

עדיפות של pseudo selectors

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

 

 

שימו לב שהקישור אינו צבוע בורוד, אלא בשחור, כיוון שזה מה שהגדרנו ב- pseudo selector של ה- link.