סלקטורים של CSS

CSS כולל כמה סלקטורים מתקדמים, שמאפשרים לבחור אלמנטים על בסיס מיקום בדף ובאמצעות attributes.

סלקטורים על בסיס מיקום בדף

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

ul > li

דוגמת הטמ"ל:

<ul id=parent>
  <li>
    <ul>
      <li>תוכן של נכד</li>
      <li>תוכן של נכד</li>
    </ul>
  </li>
  <li>תוכן של ילד</li>
  <li>תוכן של ילד</li>
</ul>

כלל ה-css הבא מאפשר להתייחס רק לילד ולא לנכד.

ul#parent > li{list-style-type: hebrew;}

והתוצאה היא שהעיגולים המקובלים לפני פריטי הרשימה יוחלפו באותיות עבריות, רק עבור פריטי רשימה שהם ילדים ישירים של #parent. אולם הכלל לא יחול על הנכדים:

והתוצאה:

• • תוכן של נכד
  • תוכן של נכד
• תוכן של ילד
• תוכן של ילד

ה-CCS:

ul#parent > li{list-style-type: hebrew; background: yellow}

והתוצאה:

• • תוכן של נכד
  • תוכן של נכד
• תוכן של ילד
• תוכן של ילד

לבחירת אלמנטים אחים, שהם צאצאים של אותו הורה, נוכל לבחור בין + ל-~.

לדוגמה:

#para1 + #para2

בוחר את האלמנט #para2 רק בתנאי שהוא בא מיד אחרי #para1.

#para1 ~ #para3

בוחר את האלמנט #para3 אם הוא בא אחרי #para1, ולא בהכרח מיד אחרי #para1.

לדוגמה:

<div>
<p id=para1>פסקה 1</p>
<p id=para2> פסקה 2</p>
<p id=para3> פסקה 3</p>
</div>

כללי ה-CSS:

#para1 + #para2{color: red;}
#para1 ~ #para3{color: blue;}

התוצאה:

סלקטורים שמבוססים על attributes

Attributes משמשים לקשור מידע נוסף לתגיות ההטמ"ל, ו-CSS מאפשר לבחור גם על בסיס ה-attributes.

ראשית, בואו נראה כמה דוגמאות ל-atrributes. לדוגמה, href שמוסיף מידע על קישור לתגית a:

a[href="new-page.php"]

לדוגמה, alt, שיכול לכלול מידע אלטרנטיבי על תמונה.

<img src="image/img1.jpg" alt="מידע חלופי לתמונה">

כמובן, שגם src הוא attribute.

נדגים כיצד css מאפשר בחירת אלמנטים על בסיס ה-attributes:

אם מחפשים את כל האלמנטים מסוג קישור שמכילים title.

a[title]

אם רוצים לבחור attribute שמכיל מידע מסוים, ניתן לציין זאת. לדוגמה:

a[title="click me"]

בוחר אלמנטים שיש להם title שערכו click me.

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

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

0 הצבעות, ממוצע 0 מתוך 5 כוכבים