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

במאמר הקודם למדנו על חלק מהסלקטורים של 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.