סלקטורים מתקדמים ב-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 (ואז החיים שלכם מרים גם כך).