Attribute Selectors 

סוג נוסף של סלקטור הוא כזה שמתבסס על attributes של אלמנטים. כמו שאתם בוודאי זוכרים, אנחנו יכולים להוסיף attributes לאלמנטים HTML-יים. אנחנו כותבים את ה- attribute-ים האלו בטאג הפותח של האלמנט. למשל, עבור אלמנט של תמונה:

<img src="someImage.png", alt="An example image">

אנחנו בדרך כלל מגדירים את ה- attribute של ה- src, שבו מפרטים את מיקום הקובץ של התמונה, ואת ה- attribute של ה- alt שבו מספקים טקטס חלופי שיוצג אם לא ניתן להציג את התמונה.

בפוסט הזה נראה כיצד ניתן להשתמש ב- attributes כדי לבחור אלמנטים ולהחיל עליהם עיצוב CSS-י.

בדיקת קיום של attribute

בואו נתחיל במשהו פשוט. ראשית, נכתוב ב- HTML שלוש פסקאות (p):

  • הראשונה שייכת ל- class בשם cl1
  • השנייה שייכת ל- class בשם cl2
  • השלישית אינה שייכת ל- class כלשהו
<body>
   <p class="cl1">This paragraph belongs to cl1</p>
   <p class="cl2">This paragraph belongs to cl2</p>
   <p>This paragraph does not belong to any class!</p>
</body>

כמובן, שעל ידי שימוש ב- class selector, היינו יכולים להכיל עיצוב על הפסקה הראשונה או השנייה:

.cl1
{
   color: blue
}

.cl2
{
   color: aqua
}

class_selector

אבל מה אם אנחנו רוצים להחיל את אותו עיצוב על כל הפסקאות שיש להן attribute של class, ללא תלות בערכו של ה- attribute? כמובן שלא נרצה לשכפל את קוד ה- CSS עבור שני class-ים שונים!

לצורך כך, אפשר להשתמש ב- attribute selector, אשר יבדוק את קיום ה- attribute באלמנט. זה נראה כך:

p[class]
{
   color: blue
}

atteibute_existance

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

הערה:
שימו לב שבמקרה הזה, הסלקטור הראשי הוא סלקטור של סוג אלמנט, אבל אפשר להשתמש ב- attribute selectors גם עם class slectors. עם זאת, אין הרבה הגיון להשתמש בהם יחד עם id selector, כי id אמור להיות ייחודי לאלמנט.

Attribute עם התאמה מדויקת

לפעמים לא נרצה להסתפק בקיום ה- attribute, אלא נרצה להחיל עליו את העיצוב רק אם יש לו ערך ספציפי.

קוד ה- HTML הבא מכיל שלוש תמונות, שתיים של קיפודים ואחת של עכבר:

<body>
   <img src="hedgehog1.jpg" alt="Hedgehog">
   <img src="hedgehog2.jpg" alt="Hedgehog">
   <img src="mouse.jpg" alt="Mouse">
</body>

נניח כעת, שאנו רוצים להוסיף מסגרת רק לתמונות של הקיפודים. בדוגמה לעיל, נוכל להבחין בין תמונות הקיפודים לבין תמונת העכבר על ידי ה- alt attribute. ערך ה- attribute הזה זהה עבור תמונות הקיפודים, אך שונה עבור תמונת העכבר.

לצורך כך, נשתמש ב- attribute selector, אבל הפעם נציין את ערכו:

img[alt="Hedgehog"]
{
   border: 5px solid blue
}

 

 

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

Attribute שמכיל ערך

אבל מה עם היינו רוצים לשנות מעט את ה- alt attribute של תמונות הקיפודים? נניח שבמקום פשוט לכתוב “Hedgehog” בשתיהן, היינו רוצים לפרט קצת יותר:

<body>
   <img src="hedgehog1.jpg" alt="Hedgehog number 1">
   <img src="hedgehog2.jpg" alt="Hedgehog number 2">
   <img src="mouse.jpg" alt="Mouse">
</body>

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

img[alt*="Hedgehog"]
{
   border: 5px solid blue
}

שימו לב להבדל - הפעם שמנו * (כוכבית) לפני סימן השווה. לכן הסלקטור לא חיפש התאמה מדויקת ל- attribute, אלא בדק אם ה- attribute מכיל את הערך “Hedgehog”.

Attribute שמתחיל בערך

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

img[alt^="Hedgehog"]
{
   border: 5px solid blue
}

גם במקרה הזה, תמונות הקיפודים תוקפנה במסגרות, אך תמונת העכבר לא, כיוון שה- alt attribute אכן מתחיל בערך Hedgehog עבור תמונות הקיפודים, אך לא מתחיל בערך זה עבור תמונת העכבר.

Attribute שמסתיים בערך

בואו נחשוב כעת על דוגמה אחרת. בואו נניח שיש לנו מספר קישורים לשני אתרים, examplesite1.com ו- examplesite2.com:

<body>
   <h3>Links from site1</h3> 
   <div><a href="http://examplesite1.com/Arik.html">Arik</a></div>
   <div><a href="http://examplesite1.com/Bentz.html">Bentz</a></div>
   <div><a href="http://examplesite1.com/about.html">About site 1</a></div>

   <h3>Links from site2</h3> 
   <div><a href="http://examplesite2.com/Arik.html">Grizelda</a></div>
   <div><a href="http://examplesite2.com/about.html">About site 2</a></div>
</body>

נניח כעת, שאנו רוצים לעצב רק את קישורי ה- about. אלו קישורים לשני אתרים שונים, אך המשותף להם הוא שהסיומת של ה- href attribute זהה. לצורך כך נוכל להשתמש ב- attribute selector שבודק את הסיפא (חלקו האחרון) של הערך:

a[href$="about.html"]
{
   color: aqua
}

attribute_suffix

שימו לב שכדי לבדוק אם ה- attribute מסתיים בערך כלשהו, משתמשים ב $ (סימן הדולר) לפני השווה. אנו רואים שהעיצוב הוחל רק על הקישורים של ה- about, כיוון שעבורם ה- href attribute מסתיים בערך “about.html”, אך לא הוחל על הקישורים האחרים, כיוון שהם לא מסתיימים בערך זה.