תקן CSS3 החדש מכיל לא מעט סלקטורים שיכולים לסייע לנו להוסיף את התכונות שאנחנו רוצים לאלמנטים שאנחנו רוצים. נכון, אפשר להשתמש תמיד ב-id או ב-class, אבל הסלקטורים האלו יכולים לעשות לנו חיים קשים. הסלקטורים של CSS3 עובדים עם כל הדפדפנים המודרניים ותעבוד גם עם אקספלורר 9. עבור דפדפני אינטרנט אקספלורר מגרסה 6,7 ו-8 – יש פתרונות ליישום הסלקטורים האלו (או חלקם).
סלקטורים המבוססים על תכונות – Attributes
Attributes או תכונות הן כל התכונות שאנו מוסיפים לאלמנט HTML, כמו למשל ה-href שאנו מוסיפים ל-a. באמצעות ה-attributes אנו יכולים לבצע בחירה מדויקת של אלמנטים
[attr]
בחירה של כל האלמנטים שיש להם את התכונה הזו. למשל בחירת כל הפסקאות שיש להן את תכונת rel. כמו למשל:
<p rel="whatever">HAHA</p>
ה-CSS הוא:
p[rel] {
color: red;
}
והנה הדוגמא החיה:
HAHA
[=attr]
בחירה של אלמנט שיש בו תכונה המכילה בדיוק את המילה שאנו רוצים. למשל, כל הקישורים שיש בהם קישור ל:-http://www.specific-site.com.
<a href="http://www.specific-site.com">קישור לאתר כלשהו</a>
זה קוד ה-CSS על מנת לבחור בהם:
a[href="http://www.specific-site.com"] {
color: red;
}
והנה הדוגמא החיה:
[*=attr]
בחירה של אלמנט שיש בו תכונה שיש בו את חלק ממילה כלשהי. למשל כל הקישורים שיש בהם את המילה google:
<a href="http://www.google.com">קישור לגוגל</a>
את זה עושים עם הסלקטור הבא ב-CSS:
a[href*=google] {
color: red;
}
והנה הדוגמא המאד חיה:
[^=attr]
בחירה של אלמנט שמתחיל בטקסט מסוים, כמו למשל בחירה של כל הקישורים שמתחילים ב-http (בניגוד לקישורים שמתחילים ב-ftp).
הנה ה-CSS:
div.testme a[href^="http:"] {
color: red;
}
והנה הדוגמא:
[$=attr]
בחירה של תכונות עם סיומת מסוימת, למשל תמונה שה-src שלה נגמר ב-png:
img[src$=".png"] {
border: 3px solid red;
}
[attr~=]
הסלקטור הזה מאפשר לנו לבחור מילה בתוך תכונה שמאפשרת כמה מילים. כמו class שיכולה להכיל כמה וכמה classים. אם אני רוצה לבחור למשל קישור מסוים שיש לו class בשם moshe, אני יכול להשתמש בסלקטור הזה. אני יודע ש-class זה קצת מיותר, אבל יש כמה וכמה תכונות שמכילות כמה מילים וזה עלול להיות שימושי.
a[class~="moshe"] {
color: red;
}
והנה הדוגמא:
סלקטורים המבוססים על מיקום בעץ
:nth-child
סלקטור :nth-child הוא סלקטור שאנו בוחרים באמצעותו אלמנט ילד או כמה אלמנטים ילדים. אם ניקח רשימה (אלמנט ul), אנו יכולים לבחור כל פריט ברשימה לפי מיקומו. למשל הרשימה הזו:
<ul id="selectme01">
<li>פריט ראשון</li>
<li>פריט שני</li>
<li>פריט שלישי</li>
<li>פריט רביעי</li>
<li>פריט חמישי</li>
</ul>
אם אני רוצה לסמן את הילד השלישי (כלומר הפריט השלישי ברשימה) אני אצטרך להכניס ל-CSS את הדבר הבא:
#selectme01 li:nth-child(3) {
color:red;
}
והנה הדוגמא החיה
- פריט ראשון
- פריט שני
- פריט שלישי
- פריט רביעי
- פריט חמישי
אני יכול להכניס גם משוואות מורכבות לרשימה באמצעות המשתנה n. המשתנה n הוא קל למדי, המשתנה פשוט נע בין אפס לאינסוף כשבכל פעם אנו מוסיפים לו אחד. כך למשל 4n הוא התוצאה של הבן הרביעי (4 כפול אחד), הבן השמיני (4 כפול שניים), הבן השנים עשר (4 כפול שלוש) הבן השישה עשר (4 כפול ארבע) וכך הלאה. 2n + 1 הוא הבן הראשון (אפס כפול שניים ועוד אחד), הבן השלישי (אחד כפול שניים ועוד 1), הבן החמישי (שניים כפול שניים ועוד אחת) וכך הלאה.
הנה דוגמא לשימוש בסלקטור n+2:
#selectme02 li:nth-child(n+2) {
color:red;
}
- פריט ראשון
- פריט שני
- פריט שלישי
- פריט רביעי
- פריט חמישי
אפשר גם להכניס את הביטוי odd או even ולבחור את כל הילדים הזוגיים או האי זוגיים. הנה דוגמא טובה לשימוש בביטוי odd:
- פריט ראשון
- פריט שני
- פריט שלישי
- פריט רביעי
- פריט חמישי
וכך נראה הקוד – פשוט ביותר!
#selectme03 li:nth-child(odd) {
color:red;
}
ישנו סלקטור דומה ל-nth-child והוא נקרא nth-of-type, משתמשים בו באותו אופן, אך הוא מבצע את הספירה רק בילדים מאותו סוג. ברשימה זה די מיותר, כי ברור שכל הילדים הם li. אך כאשר אנו לא נמצאים ברשימה ויש ילדים מכמה סוגים, nth-of-type הוא חשוב כיון שהוא מבצע את הספירה אך ורק בנוגע לילדים מאותו סוג.
nth-last-child:
nth-last-child זהה כמעט לחלוטין ל-nth-child. רק שהספירה של ה-n מתחילה בסוף האלמנטים ולא מההתחלה. ההבדל הוא דק אך חשוב. ה-n מתחיל בעצם מהסוף. כך שאם יש לנו רשימה של חמישה פריטים והסלקטור שלי הוא:
#selectme04 li:nth-last-child(1) {
color:red;
}
אז התוצאה תהיה:
- פריט ראשון
- פריט שני
- פריט שלישי
- פריט רביעי
- פריט חמישי
זה נובע מכך שהספירה נעשית מהפריט האחרון ברשימה ולא הראשון. הבדל דק וחשוב מהסלקטור הקודם. גם כאן אפשר להשתמש במשוואות של n, רק חשוב לזכור שהספירה נעשית מהפריט האחרון כלפי הראשון ולא ההיפך.
גם ל-nth-last-child יש סלקטור דומה שנקרא nth-last-of-type והוא מבצע את הספירה בנוגע לילדים מאותו סוג. ברשימה זה די מיותר כי כל הילדים הם מסוג li. אך כאשר יש לנו ילדים בנים ואנו רוצים לבצע את הספירה רק לאלמנטים מסוג מסוים, nth-last-of-type יעשה את הספירה רק בנוגע לאלמנטים שנבחרו.
במאמר הבא אנו נמשיך ללמוד על סלקטורים של CSS3.
אם כבר מדברים על תצוגת הדפסה, כדאי להסתיר את החץ שמשמש לקפיצה לראש הדף בתצוגת הדפסה…
הוא לא רלוונטי באופליין 🙂