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

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

רן בר-זיק אוקטובר 5, 2010 8:13 am אין תגובות

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

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

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

first-child

סלקטור זה מאפשר לנו לבחור את האלמנט שהוא הילד הראשון. בואו ונניח שיש לנו אלמנט פסקה (P) ויש לו שלושה ילדים, קישור, span וקישור נוסף:


<p id="myparagraph01">
<a href="nana.co.il">קישור ראשון</a>
<span>זהו ספאן חביב</span>
<a href="walla.com">קישור שני</a>
</p>

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


#myparagraph01 a:first-child {
color:red;
}

וזו התוצאה:

קישור ראשון
זהו ספאן חביב
קישור שני

יש לנו גם את סלקטור first-of-type שבוחר את הילד הראשון מסוג מסוים, כך למשל, אם אני רוצה לבחור את ה-span הראשון שיש ברשימה (לא משנה שהוא היחיד, הוא עדיין הראשון), אני אשתמש ב-first-of-type:


#myparagraph02 span:first-of-type  {
color:red;
}

וכך זה נראה.

קישור ראשון
זהו ספאן חביב
קישור שני

last-child

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


#myparagraph03 a:last-child {
color:red;
}

וכך זה נראה במציאות:

קישור ראשון
זהו ספאן חביב
קישור שני

last-of-type הוא סלקטור דומה בעקרון, אבל הוא בוחר באלמנט האחרון מסוג מסוים (ולאו דווקא בילד האחרון).

only-child

only-child בוחר באלמנט אם הוא בן יחיד. כך למשל אם יש לי פסקה כלשהי ולה יש רק קישור אחד, הוא יבחר בו, אבל אם יש יותר מקישור אחד בפסקה, לא ייבחר אף קישור.

בואו ונסתכל על הפסקה הבאה:


<p id="myparagraph04">
<a href="nrg.co.il">קישור בודד בערפל</a>
</p>

אם אני אשתמש בסלקטור הזה:


#myparagraph04 a:only-child {
color:red;
}

אז הקישור הבודד שלנו ייבחר. הנה הדוגמא:

קישור בודד בערפל

גם כאן יש לנו את only-of-type שבודק אם יש ילד אחד מאותו הסוג, ומתעלם מבנים אחרים שאינם מהסוג המפורט.

empty

empty הוא סלקטור שבוחר אלמנטים ריקים, כך למשל אם יש לנו שלוש פסקאות בדף:


<p></p>
<p> </p>
<p>Hello, World!</p>

ואנו משתמשים ב:


p:empty { 
margin: 0px;
}

אז לפסקה הראשונה בלבד לא יהיו שוליים.

enabled\disabled

אלו הם סלקטורים שבוחרים את ה-inputים שהם enabled או disabled. בואו ונניח שיש לנו טופס שיש בו שדה אחד שהוא enabled ושדה אחר שהוא disabled:


<form id="myform01">
<input type="text" value="I am Enabled" />
<input type="text" value="I am Disabled" disabled="disabled" />
</form>

אם אני אשתמש בסלקטורים enabled ו-disabled אני אוכל לצבוע אותם בשני צבעים שונים:


#myform01 input:enabled {
color: red;
}
#myform01 input:disabled {
color: blue;
}

והנה הדוגמא:



:checked

פסאודו קלאס זה תקף ל-radio buttons או checkbox – שימו לב לדוגמא הבאה:




ואת הדבר המופלא הזה עשיתי באמצעות הפסאודו קלאס הבא:


#myform02 input:checked {
outline: red 3px solid;
}

נסו לשחק עם הבחירה ותראו איך זה משתנה!

target

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

קישור המקשר ל-target בשם myform01

אם תלחצו על הקישור הזה, תקפצו אל #myform01, אבל myform01 יקבל גם רקע אדום (סוג של היילייט). נסו!

את הדבר האקסטרא מגניב הזה עשיתי עם:


#myform01:target {
background-color: red;
}

not

not הוא אולי הפסאודו קלאס הכי שימושי שיש. נניח ויש לנו שני divים עם class שהוא myDiv. לאחד מהם יש class בשם fakeDiv:


<div class="myDiv">
אני דיב חביב
</div>

<div class="fakeDiv myDiv">
אני דיב חביב אך קצת מזויף
</div>

כיצד אבחר את הדיב החביב ולא את זה שיש בו גם class של fakeDiv? עם סלקטור not! שימו לב לסלקטור הבא:


.myDiv:not(.fakeDiv) {
color: red;
}

והנה הדוגמא החיה:

אני דיב חביב
אני דיב חביב אך קצת מזויף

root

root הוא פסאודו קלאס מיותר למדי לדעתי שבוחר את האלמנט הראשון של הדף (בדרך כלל html). משתמשים בו כך:


:root {
declaration block
}

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

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

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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