בוררי ערכי מאפיינים III

שיעור 15 מתוך 15 בקורס בוררי CSS של Coddy.

בשיעור הזה נחקור את המושג של בוררי ערכי מאפיינים מכילים. הטכניקה הזו מאפשרת לבחור רכיבי HTML על סמך השאלה אם ערכי המאפיינים שלהם מכילים תת־מחרוזת מסוימת.

תחביר בורר שמחפש ערך בתוך מאפיין:

כדי לבחור רכיבים שערכי המאפיינים שלהם מכילים מחרוזת מסוימת, משתמשים בתחביר הבורר [attribute*="value"].

דוגמאות קוד:

HTML:

<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>

CSS:

/* בוחר רכיבי <div> שערכי מאפיין ה-class שלהם מכילים "fruit" */
[class*="fruit"] {
   color: green;
}

הסבר על דוגמאות הקוד:

בדוגמאות הקוד שסופקו:

מוגדרים חמישה רכיבי <div> עם ערכי מאפיין class שונים.
כלל ה-CSS [class*="fruit"] בוחר רכיבים שערך מאפיין class שלהם מכיל את תת־המחרוזת "fruit". הכלל מחיל על הרכיבים האלה את הסגנון color: green;.

כתוצאה מכך, הטקסט ברכיבי <div<strong>></strong> שהמאפיין class שלהם הוא "tag fruit" יוצג בירוק.

אתגר

קל

עליך לעצב רשימה של מוצרים בדף אינטרנט. כל מוצר מיוצג באמצעות רכיב <div> עם מאפיין data-tags שמציין את התגיות שלו (למשל, "electronics", "clothing", "accessories"). המטרה שלך היא לעצב את המוצרים באופן שונה בהתאם לתגיות שלהם באמצעות בוררי מאפיינים המכילים ערך.

משימת ה-CSS שלך היא:

להעניק צבע רקע ייחודי למוצרים שהמאפיין data-tags שלהם מכיל "electronics".
להעניק מסגרת ייחודית למוצרים שהמאפיין data-tags שלהם מכיל "clothing".
להעניק צבע רקע ייחודי למוצרים שהמאפיין data-tags שלהם מכיל "accessories".

נסו בעצמכם

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product List</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-tags="electronics">Smartphone</div>
    <div data-tags="clothing">T-Shirt</div>
    <div data-tags="accessories">Sunglasses</div>
    <div data-tags="electronics clothing">Headphones</div>
</body>
</html>

כל השיעורים ביחידה בוררי CSS

1מבוא לבוררי CSS

מטרת בוררי CSS למה הם חשובים?

4בוררי מאפיינים

מבוא לבוררי מאפיינים נוכחות וערכים מדויקים בוררי ערכי מאפיינים בוררי ערכי מאפיינים IIבוררי ערכי מאפיינים III

2בוררים פשוטים

בוררי סוג בוררי מחלקה בוררי מזהה בוררים אוניברסליים

3בוררי קומבינטורים

בורר ילד בורר צאצא בורר אח סמוך בורר אחים כללי

תרגלו בעצמכם: Web אונליין