סלקטורים מתקדמים ב-CSS

CSS? זה פשוט, לא? בת'כלס – כן. CSS אמור להיות פשוט ונחמד וכל מפתח אינטרנט אמור לדעת איך להשתמש בו, ולו מבחינה בסיסית.

אני לא הולך ללמד כאן CSS כמובן, אבל אני כן אנצל את הבמה לעבור על כמה סלקטורים שהם קצת מתקדמים ויתכן שאתם לא מכירים אותם.

סלקטור בן ישיר

כפי שאתם יודעים, הסלקטור:


div h1

יבחר את כל ה-h1 שנמצאים בתוך div, אבל אם נשתמש בסלקטור


div > h1

אנחנו נבחר את כל ה-h1 שהם הצאצאים הישירים של div למשל:


<div>
<h1>whatever</h1>
</div>

כאן ה-h1 ייבחר, אבל במבנה הבא הוא לא יבחר:


<div>
  <span>
    <h1>whatever</h1>
  </span>
</div>

אח מיידי

הסלקטור + משמש אותנו לבחור אחים מידיים, למשל:


h1 + h2

ישמש אותנו לבחור h2 שמגיע מיד לאחר h1, למשל:


<h1>Hello</h1>
<h2>test</h2>

סלקטור הכל

כוכבית או * היא הסלקטור שבוחר את כל האלמנטים, למשל הסלקטור:


div > *

יבחר את כל הילדים המידיים של ה-div, בלי קשר לזהותם. אגב, מדובר בסלקטור זללן במיוחד של זכרון, אז תשתמשו בו במשורה ורק איפה שצריך.

סלקטורים של תכונות

אנחנו יכולים לבחור אלמנטים גם לפי התכונות שלהם! איך בדיוק? שימו לב:


img[title]

הסלקטור הזה בוחר רק img שיש להם title.


a[href][title]

הסלקטור החביב הזה בוחר רק קישורים שיש להם גם href וגם title.


input[type="text"]

הסלקטור הזה בוחר input מסוג text בלבד.

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

אם אתם לא מכירים את הסלקטורים האלו – כדאי להכיר. קל להשתמש וליישם אותם כבר היום. הם נתמכים בכל הדפדפנים מאינטרנט אקספלורר 7 ומעלה, כך שאין כל בעיה להשתמש בהם כבר היום. אלא אם כן אתם מפתחים לאינטרנט אקספלורר 6 (ואז החיים שלכם מרים גם כך).

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. 🙂

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (1 הצבעות, ממוצע: 5.00 מתוך 5)

תגיות: פורסם בקטגוריה: פתרונות ומאמרים על פיתוח אינטרנט

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.