מדריך 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="value]. לדוגמה, אם ה-attribute הוא food-fruit:

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

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

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

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

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

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

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

a[href='']{}

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

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

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

input[type='textarea']{}

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

input[type='email']{}

בחירה באלמנטים ריקים

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

div:empty{}

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

div:empty{display: none;}

בחירה באלמנטים על בסיס ביטויים רגולריים

כפי שראינו, אנחנו יכולים לבחור לפי ערכו של 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;}

נצפה בתוצאה:

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

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:

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

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

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

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

input:enabled{}
input:disabled{}

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

input[type=checkbox]:checked{}

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

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים