אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » CSS3 » סלקטורים של CSS3 – חלק א'

סלקטורים של CSS3 – חלק א'

רן בר-זיק אוקטובר 3, 2010 7:55 am תגובה אחת

מדריך על סלקטורים חדשים שיש בתקן CSS3 שמאפשרים לנו בחירה מדויקת ונכונה יותר של אלמנטים.

»סלקטורים של CSS3 – חלק ב'
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

תקן 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;
}

jpeg file

png image

[attr~=]

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


a[class~="moshe"] {
color: red;
}

והנה הדוגמא:

Link to Moshe

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

: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.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
CSS

תגובה אחת

  1. שלמה הגב נובמבר 3, 2021 בשעה 5:33 pm

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

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד