מדריך לסלקטורים ומחלקות ב - CSS

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

ID Selectors - סלקטורים ייחודיים

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


המבנה התחבירי של ID Selectors בשפת CSS

כדי להחיל משפט זה על אלמנט HTML כלשהו בדף שלנו עלינו לתת לאותו אלמנט מזהה ייחודי ששמו זהה לזה שהגדרנו בקוד ה - CSS שלנו. באיור שלמטה בחרתי לתת לאלמנט <p> מסויים את המזהה "YellowText" שעבורו הגדרנו באיור שלמעלה קוד CSS:


המבנה התחבירי של ID Selectors בשפת CSS

המזהים הייחודיים חייבים להיות ייחודיים - כלומר לא ניתן לתת את אותו ID - אותו מזהה - לשני אלמנטים באותו דף. יחד עם זאת, המזהה יכול לשמש כמזהה של אלמנט אחר בדף אחר. אין חובה שאלמנטים בעלי אותו זיהוי ייחודי בדפים שונים יהיו מאותו סוג. כך למשל בדף אחר מזה שבדוגמה שבאיורים שלנו האלמנט שיישא את המזהה "YellowText" יכול להיות מסוג <div> או <h3> או כל אלמנט אחר שבו נבחר.

מדריך וידאו לשימוש בסלקטורים ייחודיים ב - CSS

 

Class Selectors

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


המבנה התחבירי של ID Selectors בשפת CSS

כדי להחיל משפט זה על אלמנט HTML כלשהו בדף שלנו עלינו לשייך אותו אלמנט למחלקה ששמה זהה לזה שהגדרנו בקוד ה - CSS שלנו. באיור שלמטה בחרתי לשייך אלמנט <p> מסויים למחלקה "YellowText" שעבורה הגדרנו באיור שלמעלה קוד CSS:


המבנה התחבירי של ID Selectors בשפת CSS

Universal Selectors

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

* {
color: black;
padding: 0;
}

בדוגמה שלמעלה יחולו הגדרות משפט ה - CSS שלנו על כל האלמנטים בדף האינטרנט שלנו.

Type Selectors

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

h1 { font-family: serif }

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

Descendant Selector

לעתים נרצה שאלמנט מסוים יעוצב בדרך שונה מהרגיל כאשר הוא מקנן בתוך אלמנט אחר. בדוגמה הבאה למשל האפקט של הטקסט המודגש בצבע אדום בעזרת האלמנט <em> יטשטש במידה ויקנן בתוך האלמנט <h1> משום שאף הטקסט של אלמנט זה מוגדר כאדום:

h1{color: red}
em{color:red}

נפתור בעיה זו באמצעות סלקטור מסוג Descendant שבעזרתו נגדיר שאם האלמנט <em> מקנן בתוך האלמנט <h1> אזי צבעו יהיה כחול ולא אדום ואילו בכל מקרה אחר צבע הטקסט בתוכו יהיה אדום. נעשה זאת בעזרת הקוד הבא:

h1 { color: red }
em { color: red }
h1 em { color: blue }

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

אלמנט ייחשב לצאצא (Descendant) של אלמנט אחר באחד משני מקרים: אם הוא בנו הישיר של אלמנט אחר או שהוא בנו של אלמנט אשר הינו צאצא של האלמנט האחר.

Child Selector

בשונה מסלקטור מסוג Descendant סלקטור מסוג Child יקנן תמיד בתוך אלמנט האב שלו והשניים יקיימו תמיד יחסי בן - אב. כדי להגדיר יחס זה יש להשתמש בסימן < . התחביר הכללי של סלקטור זה ייראה כך:


המבנה התחבירי של ID Selectors בשפת CSS

נשתמש בסלקטור מסוג זה כאשר נרצה להגדיר עיצוב עבור כל האלמנטים מסוג מסוים אשר בינם לבין אלמנטים מסוג אחר מתקיים יחס של אבות לבנים. לדוגמה כל האלמנטים מסוג <ul> אשר הינם בנים ישירים של אלמנטים מסוג <div>:

div > ul {color: red; font-size:12px;}

בדוגמת הקוד שלמעלה יחולו הגדרות העיצוב רק על אלמנטים מסוג <ul> המקננים בתוך אלמנטים מסוג <div>. ואילו אלמנטים מסוג <ul> המקננים ישירות בתוך האלמנט <body> לא יהיו חלק מעיצוב זה.

Attribute Selector

סלקטור מסוג Attribute - אולי המעניין והפחות ידוע מבין כל הסלקטורים - מאפשר לברור על איזה אלמנטים להחיל את הגדרות ה - CSS שלו על פי חלקים מתוך הגדרות ה - HTML שלהם. את קריטריון ההתאמה שלו לאלמנטים יש לשים בתוך סוגריים מרובעים ולאחריהן רווח. בדוגמה הבאה למשל נגדיר שהעיצוב שלנו יחול רק על אלמנטים מסוג <p> אשר התכונה title הוגדרה להם:

p[title] {color: red;}

כמובן שיכולנו בדוגמה למעלה לבחור בכל Attribute ובכל אלמנט אחר. בדוגמה הבאה למשל, נחיל את העיצוב שנרצה על כל אלמנט החבר במחלקה ששמה "bgRed":

h2[class=bgRed] { background-color: Red; }

היחס בקריטריון ההתאמה לא חייב להיות של 'שווה ל...' אלא הוא יכול להיות גם של 'לא שווה ל...'. בדוגמה הבאה נחיל את העיצוב שלנו על כל אלמנט מסוג <h3> שגודל הגופן (font) שלו אינו 16px:

h3[font-size~=14px] {color: red;}

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

*[lang|="it"] { display : none }

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש