מדריך CSS מספר 2 - סלקטורים (Selectors).

שלבים

1. 1

   שלב 1

   נניח שבדף האינטרנט שלנו נרצה שכל אלמנט או קבוצה של אלמנטים יהיו תמיד בצבע אדום ומיושר לימין. זה לא יהיה חכם לעבור על כל אלמנט ולהגדיר אותו באדום ומיושר לימין - יותר חכם יהיה להגדיר Class שכל אלמנט שישתמש בו יהיה מוגדר כך. בואו נראה דוגמא לClass כזה:
2. 2

   שלב 2

   .redright {text-align:right; color:red;}
4. 3

   שלב 3

   שימו לב לנקודה לפני הסלקטור. בחרתי במילה redright באופן שרירותי בכדי לייצג את הClass (מומלץ לבחור מילה שמייצגת הכי טוב את הClass ולא לבחור במילים חסרות משמעות). הנה דוגמא לשימוש בClass הזה:
5. 4

   שלב 4

   
   .redright {text-align:right; color:red;} Big header

   This is some cool stuff!

   Text without using the CSS class

6. 5

   שלב 5

   h1.center {text-align:center;}
7. 6

   שלב 6

   כעת כל תגית h1 שמשתמשת בClass עם הערך center תתיישר למרכז המסך. (כל תגית אחרת שתשתמש בClass הזה לא תושפע). לדוגמא:
8. 7

   שלב 7

   
   h1.center { text-align:center; } This is a heading This bold text won't use the class.
9. 8

   שלב 8

   את חוק הCSS (הClass) הזה רשמתי בצורה קצת שונה - המבנה הוא עדיין אותו מבנה, הסלקטור ראשון ואחריו סוגריים מסולסלים ובינהם העיצוב, אך בצורה הזו הקריאה של החוק קלה יותר. בדוגמא הזו, רשמנו את מאפיין הClass ל2 תגיות אך הוא ישפיע רק על תגית הh1 מכיוון שכך הגדרנו בClass עצמו.
10. 9

    שלב 9

    
    זה יראה בדפדפן כך.
11. 10

    שלב 10

    עד כאן הגדרנו עיצוב לקבוצות של אלמנטים בעזרת הClass, כעת נראה כיצד ניתן להגדיר עיצוב לאלמנטים יחידים בעזרת הסלקטור id. חוק עם סלקטור id נראה כך:
12. 11

    שלב 11

    כמו שאתם יכולים לנחש, הגדרנו כאן חוק שמגדיר שלכ מי שישתמש בid בשם blueright יהיה מיושר לימין ובצבע כחול. בואו נראה דוגמא לשימוש בid הזה.:
13. 12

    שלב 12

    
    #blueright{text-align:right;color:blue;}

    Some text that is on the right and blue.

    Some sad paragraph without an ID

14. 13

    שלב 13

    #blueright{text-align:right;color:blue;}
15. 14

    שלב 14

    
    בדוגמא אנו רואים שגם כאן, שהחוק עם הid צריך להיות בין תגיות הstyle ובין תגיות הhead. תגית הP הראשונה בה שמנו את מאפיין הid ואת הערך blueright יושפע מהחוק שהגדרנו ואילו תגית הP השניה לא תושפע כיוון שלא מוגדר לה id.
16. 15

    שלב 15

    הClass צריך להיות מוגדר כמו כל חוק CSS - בתוך אלמנט style ובין תגיות הhead. בכדי להשתמש בClass על תגיות מסויימות, פשוט יש לשים בתגית הפותחת של אלמנט כלשהו את המאפיין class ולו את הערך של הClass המבוקש. ניתן לעשות כמה קלאסים שתרצו ולהשליך על כל תגית Class אחר.
17. 16

    שלב 16

    
    ככה זה יראה בדפדפן. בתגית הh1 ובתגית הp הראשונה קיים מאפיין הClass שלנו והטקסט באלמנטים האלו יושפע מהעיצוב שהגדרנו ואילו בתגית הp השניה לא הוגדר הקלאס אז הטקסט לא יושפע ויוצג כרגיל.
18. 17

    שלב 17

    ניתן להגדיר גם Class שיעבוד על תגית אחת בלבד ולא על כל התגיות. לדוגמא: