תוכן עניינים
בין אם אתם תותחים של CSS או שרק התחלתם את דרככם בעולם הWEB,
לכולנו יצא לבזבז לא מעט מחשבה ושורות של קוד על דברים שיכולנו לפתור בקלות ובמהירות באמצעות סלקטורים בCSS שכנראה לא ידענו על קיומם.
רבים נוטים לזלזל במגוון הגדול של הסלקטורים שעומדים לרשותנו כשאנחנו כותבים CSS.
יתרה מכך, רבים מאיתנו (וגם אני חוטא בזאת) מתקבעים על כמה סלקטורים אהובים, ומשתמשים כמעט ורק בהם כשאנחנו מפתחים.
נוכחתי לגלות על בשרי, שלפעמים אני משקיע לא מעט זמן של מחשבה ושורות קוד על מציאת פתרון עקיף (WORKAROUND כמו שרבים מאיתנו אוהבים להגיד..), לדברים שבדיעבד יכולתי לפתור בקלות רבות על ידי שימוש בסלקטור שלא הייתי מודע לקיומו.
בעקבות כך, החלטתי לרכז מספר סלקטורים שיקלו לכולנו את הכתיבה ויחסכו לנו את שעות המחשבה והכתיבה המיותרות.
שימו לב שבחרתי לחלק את הסלקטורים לקטגוריות, אם כי זה לאו דווקא השימוש היחידי של אותם סלקטורים!
סלקטורים מבוססי מיקום אלמנטים
הקטגוריה הראשונה שלנו תהיה סלקטורים מבוססי מיקום של אלמנטים – הכוונה סלקטורים שנועדו להתייחס לאלמנטים במיקום מסויים ביחס לאלמנט האב שלהם.
הסלקטורים הללו נחוצים במיוחד (אבל לא רק!) כשיש לנו קטעי קוד ואלמנטים חוזרים, אך עלינו להתייחס רק לחלק מתוכם, ולא לכולם.
בשביל מה לתת לכל אחד כזה ID או Class ייחודי, כשאפשר פשוט להשתמש בסלקטור המתאים?
:first-child
|
1 2 3 4 5 |
div p:first-child { color: red; } |
השימוש בסלקטור first-child ייתן לנו את אלמנט הבן הראשון בלבד. בדוגמא למעלה, ההתייחסות תהיה רק לאלמנט הפסקה (p) הראשון שיופיע בתוך אלמנט div.
שימוש נפוץ באלמנט הוא לדוגמא ברשימת פריטים שבה לכל פריט יש גבולות – אך אין לנו צורך בגבול עליון לפריט הראשון ברשימה שכן אין לפניו אף פריט – הזדמנות מושלמת לשימוש בfirst-child: – דוגמא תמצאו ממש עוד מעט!
:last-child
|
1 2 3 4 5 |
ul li:last-child { border: none; } |
הסלקטור last-child הוא הסלקטור הנגדי לסלקטור עליו דיברנו קודם, first-child. הפעם ההתייחסות היא לאלמנט הבן האחרון בלבד.
דוגמא:
ניקח את הדוגמה הבסיסית ביותר לסלקטורים האלו, רשימה:
|
1 2 3 4 5 6 7 |
<ul> <li>פריט 1</li> <li>פריט 2</li> <li>פריט 3</li> </ul> |
נוסיף לרשימה גבולות:
|
1 2 3 4 5 |
ul li { border: 5px solid black; } |
אבל עכשיו קיבלנו מצב בעייתי – יש חפיפה בין הגבול התחתון של הפריט הראשון לגבול העליון של הפריט השני, וכך גם בין הגבול התחתון של הפריט השני לגבול העליון של הפריט השלישי. (תכף תיראו את הדוגמא..)
רבים היו פותרים את הבעיה על ידי הוספת classים ייחודיים לפריטים האלו:
|
1 2 3 4 5 6 7 |
<ul> <li class="first-item">פריט 1</li> <li>פריט 2</li> <li class="last-item">פריט 3</li> </ul> |
ועכשיו נותנים לclassים הללו את ביטול ההגדרות הרצוי:
|
1 2 3 4 5 6 7 8 9 |
ul li.first-item { border-bottom: none; } ul li.last-item { border-top: none; } |
בדיוק כאן נכנסים לתמונה first-child ו-last-child:
|
1 2 3 4 5 6 7 8 9 |
ul li:first-child{ border-bottom: none; } ul li:last-child{ border-top: none; } |
וחסכנו שני classים מיותרים 🙂
אתם יכולים לשחק בעצמכם:
See the Pen First child & Last Child by Master Scripter (@MasterScripter) on CodePen.
:first-of-type
הסלקטור הבא אומנם מזכיר קצת את :first-child, אך לא להתבלבל. בעוד שילד ראשון עלול לחזור, הכוונה כאן היא לאלמנט הראשון מסוגו – ולכן לא עלולה להיות חזרה.
ניקח את הדוגמא הקודמת, אך נכפיל אותה – הפעם יש לנו 2 רשימות:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <li>פריט 1</li> <li>פריט 2</li> <li>פריט 3</li> </ul> <ul> <li>פריט 4</li> <li>פריט 5</li> <li>פריט 6</li> </ul> |
הפעם, שימוש ב- :first-child יצור לנו התייחסות כפולה – גם לפריט 1, וגם לפריט 4 – מכיוון ששניהם מהווים אלמנטים בנים ראשונים.
לעומת זאת, עם :first-of-type לא תהיה לנו בעיה כזו:
|
1 2 3 4 5 |
ul:first-of-type li:first-child { border-bottom: none; } |
הקוד הנ"ל יתייחס אך ורק לפריט מספר 1, ולא לפריט מספר 4.
:last-of-type
זהו הסלקטור הנגדי ל :first-of-type. ההתייחסות תהיה לאלמנט האחרון מסוגו בלבד – בדיוק ההפך מ:first-of-type.
:nth-child(n)
|
1 2 3 4 5 |
li:nth-child(3) { color: red; } |
:nth-child מאפשר לנו לבחור אלמנט בן ספציפי. בדוגמא למעלה, כל פריט מספר 3 יקבל צבע אדום.
אבל הכוח האמיתי של הסלקטור הזה טמון ביכולת שלו לקבל נוסחא:
|
1 2 3 4 5 |
li:nth-child(3n) { color: red; } |
במקרה הזה, כל פריט שלישי יקבל צבע אדום. מה ההבדל? שאם בדוגמא הקודמת רק פריט מספר שלוש קיבל את הצבע האדום, כאן – אם יש לנו לדוגמא 6 פריטים, גם השלישי וגם השישי יצבעו באדום – משום שהנוסחא שלנו מציינת כל פריט שלישי.
לא סתם בחרתי להשתמש בביטוי נוסחא – הסלקטור מסוגל לקבל גם דברים כאלו:
|
1 2 3 4 5 |
li:nth-child(3n+1) { color: red; } |
והריצה על הנוסחא תיראה כך:
|
1 2 3 4 5 6 |
3 * 0 + 1 = 1 // n = 0 3 * 1 + 1 = 4 // n = 1 3 * 2 + 1 = 7 // n = 2 ... |
ולכן הקוד שכתבנו יתייחס לפריט הראשון, הרביעי, השביעי, וכן הלאה..
חשוב לזכור: תמיד בריצות על נוסחאות, n מתחיל מ0, ולא מ1.
:nth-of-type(n)
אותו עקרון כמו :nth-child, רק שההתייחסות היא לא לאלמנט בן, אלא לאלמנט מסוג מסויים.
סלקטורים מבוססי תכונה (attribute)
על הקטגוריה השנייה אני חייב לדבר בכנות – לא הייתי מחסידיה. כמעט ולא השתמשתי בכלל בסלקטורים שמתבססים על תכונות של אלמנטים, אלא העדפתי לתת classים ייעודיים ועוד כל מיני פתרונות עקיפים.
אבל איפה שאני כשלתי, אתם צריכים ללמוד! אני למדתי בדרך הקשה..בזבזתי יותר מידי שורות קוד עד שהועלתי בטובי להשתמש בסלקטורים הנפלאים האלה:
[attribute]
זהו הסלקטור הבסיסי, שעליו מתבססים יתר הסלקטורים בקטגוריה הזאת. הכוונה היא רק לאלמנטים אשר יש להם את התכונה שציינו:
|
1 2 3 4 5 |
[target] { color: red; } |
במקרה הזה, התייחסנו רק לאלמנטים אשר יש להם תכונת target.
ומה קורה כשרוצים להיות יותר ספציפיים?
[attribute=value]
|
1 2 3 4 5 |
[target="_blank"] { color: red; } |
השוואה ישירה. פשוטו כמשמעו – הסלקטור מתייחס לאלמנטים אשר יש להם תכונה ספציפית(target במקרה הזה), ויש בה ערך ספציפי("_blank" במקרה הזה).
[attribute^=value]
|
1 2 3 4 5 |
a[href^="https"] { color: red; } |
ערך מתחיל ב. כל הקישורים שלנו שמתחילים ב"https" – הסלקטור מתייחס לכלל האלמנטים אשר יש להם תכונת href, והערך שבתוכה מתחיל בhttps.
[attribute$=value]
|
1 2 3 4 5 |
img[src$=".jpg"] { display: block; } |
ערך נגמר ב. במקרה הזה, כל התמונות מסוג jpg. (כאלו שכתובת המקור שלהן נגמרת ב.jpg).
שימושי אה?
[attribute*=value]
|
1 2 3 4 5 |
a[href*="masterscripter"] { text-decoration: underline; } |
אחרון חביב – ערך מכיל. בדוגמא שלנו – כל הקישורים שתכונת הhref שלהם מכילה את המילה masterscripter 🙂
סלקטורים כלליים שאתם חייבים להכיר
הקטגוריה האחרונה היא לא באמת קטגוריה, זה פשוט ריכוז של כמה סלקטורים שאין ביניהם קשר – אבל הם אדירים ואתם חייבים להכיר אותם!
אני מקווה שאצליח לחדש לכם, אבל אם לא – סימן שאתם יודעים מה אתם עושים 😉
*
|
1 2 3 4 5 |
div * { color: red; } |
טוב, האמת שהסלקטור הזה די מוכר. ובכל זאת – סלקטור הכוכבית מתייחס לכלל האלמנטים, במקרה של הדוגמא למעלה – לכלל האלמנטים שנמצאים בתוך הdiv. זה מאוד שימושי כשרוצים להחיל הגדרות מסויימות על כל האלמנטים במסמך, או ריכוז גדול של אלמנטים. 2 שורות קוד וכמו פוקימון, תפסתם את כולם.
::after ו- ::before
אם לומר את האמת, אז גם הסלקטורים after ו- before הם די מוכרים, אם בכלל אפשר לקרוא להם סלקטורים. כמו שבוודאי ראיתם מהעובדה שיש לפנים נקודותיים כפולים(::), מדובר בסלקטורים שהם פסאודו אלמנטים. after ו-before הם לא סלקטורים טיפוסיים, מכיוון שהם מאפשרים להוסיף דברים לפני ואחרי אלמנט.
אחד השימושים הנפוצים ביותר של הסלקטורים הללו הוא הפרדות – זה תקף בכל מקרה שאנחנו נזקקים להפרדה, אבל בוא ניקח תפריט כדוגמא. מפתחים רבים יוסיפו אלמנטים שיהוו את הקווים המפרידים:
|
1 2 3 4 5 6 7 8 9 10 11 |
<nav> <a href="somelink">קישור 1</a> <span> | </span> <a href="somelink">קישור 2</a> <span> | </span> <a href="somelink">קישור 3</a> <span> | </span> <a href="somelink">קישור 4</a> </nav> |
לא חבל? אפשר לחסוך את האלמנטים האלו בעזרת before ו- after, בשילוב עם עוד סלקטורים שמוזכרים כאן.
הHTML שלנו יראה ככה:
|
1 2 3 4 5 6 7 8 |
<nav> <a href="somelink">קישור 1</a> <a href="somelink">קישור 2</a> <a href="somelink">קישור 3</a> <a href="somelink">קישור 4</a> </nav> |
אבל הCSS שלנו, זה האוצר האמיתי:
|
1 2 3 4 5 6 7 8 9 |
nav > a::after { content: " | "; } nav > a:last-child::after { content: none; } |
התוצאה אותה תוצאה אבל הקוד יעיל יותר ואלגנטי יותר, והכי חשוב – חסכנו שלושה אלמנטים!
ולהלן הדוגמא:
See the Pen After Selector by Master Scripter (@MasterScripter) on CodePen.
:not(selector)
הגיע הזמן לגילוי נאות – הסלקטור not הוא פחות או יותר הסיבה שבגללה כתבתי את הפוסט הזה. גיליתי אותו לא מזמן, הוא נתמך בכל הדפדפנים, והוא מדהים!
אני לא יכול לתאר לכם את כמות הכאב ראש שנחסכה ממני בזכות הסלקטור הקסום הזה. הוא הסיבה היחידה שבגינה הצלחתי לפתח בר נגישות שהשינויים בו מבוססי CSS בלבד.
אבל מספיק עם התשבוחות – הגיע הזמן להסברים ודוגמאות 🙂
הnot הוא סלקטור שלילה. ההגדרות שנחיל בתוכו יתייחסו לאלמנטים שאינם תואמים את הסלקטור שבתוך הסוגריים של הnot(selector).
נתחיל מדוגמא פשוטה:
|
1 2 3 4 5 |
<p>פסקה 1</p> <p class="special">פסקה 2</p> <p>פסקה 3</p> |
|
1 2 3 4 5 |
p:not(.special) { color: red; } |
התייחסנו לכלל האלמנטים מסוג p, שאינם בעלי class="special".
נתקדם למשהו קצת יותר מעניין – סלקטורים מיוחדים:
|
1 2 3 4 5 |
p:not(:nth-child(2n)) { color: red; } |
בדוגמא הזאת, הגענו לאותה תוצאה – אולם בהתייחסות שונה. במקום להתייחס לאלמנטים שאין להם class מסויים, התייחסו לאלמנטים שאינם הבנים בכפולות של 2, ומכיוון שיש לנו רק 3 – אלו הראשון והשלישי.
אז מה עוד? שירשור! את סלקטור הnot אפשר לשרשר, ובכך להחיל אותו על מגוון אלמנטים:
|
1 2 3 4 5 6 |
<p class="first">פסקה 1</p> <p class="second">פסקה 2</p> <p class="third">פסקה 3</p> <p class="fourth">פסקה 4</p> |
|
1 2 3 4 5 |
p:not(.first):not(.third) { color: red; } |
הפעם, בעזרת השרשור, התייחסנו לאלמנטים שאינם בעלי class="first" ו- class="second", משמע רק לפסקאות השנייה והרביעית.
שימו לב: לא ניתן להשתמש בסלקטורים מורכבים בתוך הסלקטור not, כמו למשל ::after ו- ::before.
בשביל לעזור לכם לזכור את הכללים, הכנתי תמונה קטנה שמרכזת את כל מה שדיברנו עליו עד עכשיו בנוגע לסלקטור not:
ומה הלאה?
אז האמת שתחום הסלקטורים, כמו הרבה תחומים בתוך פיתוח WEB, מתעדכן לא מעט.
גם אם זה לא הוספה של סלקטורים חדשים, הרבה פעמים יש חידושים שנכנסים ומקלים לנו את החיים.
רוצים דוגמא? בקרוב עתיד להיכנס(הוא כבר קיים, אך התמיכה בדפדפנים אינה מספיק רחבה) שרשור סלקטור not באמצעות רשימה, ולא ריבוי סלקטורים.
החשיבות במעקב אחרי הדברים האלה היא לאו דווקא כדי להיות "הכי מעודכן" (עניין חשוב בפני עצמו), אלא בעיקר כדי להקל עלינו ולעשות את הכתיבה נוחה, נעימה ומהירה יותר.
יש לכם איזה סלקטור אהוב שלא הזכרתי כאן? ספרו לי עליו בתגובות! 🙂
מקורות
W3SCHOOLS
CSS-TRICKS
ENVATOTUTS+
3 תגובות
ינון אלבז
28 בנובמבר 2016 - 21:03יש טעות בדוגמה הראשונה למעשה הדוגמה הראשונה והשניה זה אותו דוגמה
שלומי זק
29 בנובמבר 2016 - 11:50ינון, אתה צודק לגמרי!
התבלבלתי לגמרי בין בדוגמאות, ועוד בטקסט שעוקב אחרי הדוגמא הראשונה התייחסתי בכלל לדוגמא המקורית שרציתי לעשות..
תודה רבה על ההערה, העניין תוקן! 🙂
נחמי
9 בנובמבר 2021 - 17:06פוסט ברור ומחכים
תודה רבה!!!!