נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך CSS3 - סלקטורים

מחבר:
בתאריך:

סלקטורים מאפשרים לבחור לאיזה אלמנטים להוסיף איזה כללי CSS. ב-CSS3 נוספו מספר רב של סלקטורים, ולכן אנחנו יכולים להיות מאוד מדויקים בבחירת האלמנטים שעליהם נפעיל את כללי העיצוב. באמצעות הסלקטורים החדשים אנחנו יכולים להכיל את כללי העיצוב לפי attributes, לפי התאמה ל-regular expression, לפי מיקום בהיררכיה וסלקטורים חדשים של מחלקות (class) ומזהים (id). 

 

סלקטורים של attributes

מחלקות (class) ומזהים (id) שימשו לאבחנה בין אלמנטים שונים בדף אינטרנט כבר בגרסאות קודמות של CCS, אבל CSS3 מאפשר בחירה על סמך כל attribute של HTML. לדוגמה, על סמך href, name וכיו"ב. כדי לבחור ב-attribute בתור סלקטור, נוסיף אותו בתוך סוגריים מרובעים משמאל לתכונות, באופן הבא [attribute]. בוא נראה את הדוגמה הבאה. רשימת מכולת שבה כל שורה מקבלת שם באמצעות attribute מסוג name.

<ul>
   <li name="food-fruit">אפרסמון</li>
   <li name="food">לחם</li>
   <li name="food-veg">גזר</li>
   <li name="food-veg">מלפפון</li>
   <li>מברשת שיניים</li>
</ul>

אם אנחנו רוצים לבחור בכל האלמנטים שה-attribute שלהם הוא name, זה הקוד שבו נשתמש:

[name] {color: orange;}

נסתכל על התוצאה:

 

שימוש בסלקטורים לבחירת אלמנט על סמך attribute

עכשיו, אם נרצה לבחור על סמך attribute וערך. נוסיף את הערך ל-attribute בתוך הסוגריים המרובעים ["attribute="value]. לדוגמה, אם ה-attribute הוא food-fruit:

[name="food-fruit"] {color: orange;}

כך נראית התוצאה:

 

שימוש בסלקטורים לבחירת אלמנט על סמך attribute

 

אנחנו רואים שההשפעה היא רק על האלמנט ששמו food-fruit.

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

li[name="food-fruit"] {color: orange;}

 

דוגמאות נוספות לסלקטורים של attributes:

כדי לבחור רק בלינקים מסוימים:

a[href='http://reshetech.co.il']{}

כדי לבחור רק בתמונות מסוימות:

img[src='images/img.jpg']{}

בחירה באלמנטים של טופס:

input[type='textarea']{}

דוגמה נוספת לבחירה באלמנטים בטופס:

input[type='email']{}

 

בחירה באלמנטים על בסיס regular expressions

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

אם אנחנו רוצים שכל מה שמתחיל בביטוי-food יושפע, נשתמש ב- =^.

[name^="food"] {color: red;}

אם אנחנו רוצים שכל מה שמופיע בו הביטוי food יושפע, ללא תלות במיקום, נשתמש ב- =*.

[name*="food"] {color: red;}

אם אנחנו רוצים שרק מה שמסתיים בביטוי- food יושפע, נשתמש ב- =$.

[name$="food"] {color: red;}

 

סלקטורים שמבוססים על מיקום בהיררכיה

אם אנחנו רוצים לבחור אלמנטים על בסיס מיקומם בהיררכיה, נוכל להשתמש בסלקטור ()nth-child:

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

li:nth-child(2) {color: red;}

את זה אפשר לנסות לבד.

באופן דומה, אם רוצים לבחור אלמנטים מסוף הרשימה, אז משתמשים ב-()nth-last-child: , לדוגמה האלמנט השני מהסוף ברשימה יכול להראות כך:

li:nth-last-child(2) {color: red;}

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

 

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

li:nth-child(even) {background-color:#F8F8F8;}
li:nth-child(odd) {background-color:#787878;}

נצפה בתוצאה:

 

סלקטורים מבוססי היררכיה של CSS3

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

li:nth-child(3n){
    color: orange;
}

וכן זה נראה ברשימה לא מסודרת (ul):

  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות

 

כמובן, שניתן לבחור כל מספר של n שרוצים (2n,3n,4n), וכיו"ב.

 

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

li:nth-child(3n+1){
    color: orange;
}
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות

והקוד הבא יתחיל את הספירה מהאלמנט השני:

li:nth-child(3n+2){
    color: orange;
}
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות
  • דברים
  • טובים
  • באים
  • בשלשות

 

סלקטורים חדשים למחלקות (class) ולמזהים (id)

מחלקות ומזהים (claas ו-id) שימשו רבות לבחירת אלמנטים בגרסאות קודמות של CSS, אולם CSS גרסה 3, מציע לנו בחירה הרבה יותר מדויקת של האלמנטים הרצויים לנו. הסלקטור הכי שימושי הוא סלקטור not, שמאפשר לנו להימנע מבחירת מחלקות מסוימות. המבנה הוא  (not(.class:סלקטור. לדוגמה, בקוד ה-html המצורף, אנחנו מעוניינים לצבוע את כל הפסקאות, לבד מהפסקאות ששייכות ל-class מסוג veg, שאנחנו לא רוצים לצבוע.

<ul>
   <li class="food fruit">אפרסמון</li>
   <li class="food">לחם</li>
   <li class="food veg">גזר</li>
   <li class="food veg">מלפפון</li>
   <li>מברשת שיניים</li>
</ul>

קוד ה-CSS ייראה כך:

li:not(.veg) {color:orange;}

בתוצאה, כל הפסקאות נצבעות לבד מאילו ששייכות למחלקה veg:

 

סלקטורים מסוג not

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

li:not(.veg):not(.fruit) {color:orange;}

סלקטורים מועילים לטפסים

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

input:enable{}
input:disable{}

והסלקטור :checked מאפשר לעצב אלמנט מסוג radio או checkbox בתנאי שהוא נבחר. כך זה נראה:

input[type=checkbox]:checked{}

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

 

הוסף תגובה חדשה

 

= 6 + 7

תמונת המגיב

שחר בתאריך: 01.06.2016

מדריך איכותי וברור. תודה רבה יוסי!!!

תמונת המגיב

יוסי בן הרוש בתאריך: 01.06.2016

בכיף, שחר.