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

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

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

תחביר בורר לערך מאפיין שמסתיים במחרוזת:

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

דוגמאות קוד:

HTML:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>

CSS:

/* בוחר כפתורים שערכי המאפיין class שלהם מסתיימים ב-"-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

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

מוגדרים שלושה כפתורים עם ערכי מאפיין class שונים.
כלל ה-CSS [class$="-tertiary"] בוחר רכיבים שערך מאפיין ה-class שלהם מסתיים ב-"-tertiary". הוא מחיל על הכפתורים האלה את הסגנון background-color: lightcoral;.

כתוצאה מכך, לכפתור שערך מאפיין ה-class שלו הוא "btn-tertiary" יהיה צבע רקע של אלמוג בהיר.

אתגר

קל

ניתנה לך רשימה של רצועות מוזיקה בדף אינטרנט. כל רצועה מיוצגת באמצעות רכיב <div> עם מאפיין data-track המציין את הפורמט שלה (למשל, "mp3", "wav", "flac"). עליך לעצב את הרצועות באופן שונה בהתאם לפורמט שלהן, באמצעות בוררים התואמים לערך מאפיין שמסתיים במחרוזת מסוימת.

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

הגדר צבע רקע ייחודי לרצועות שבהן ערך המאפיין data-track מסתיים ב-"mp3".
הגדר צבע רקע ייחודי לרצועות שבהן ערך המאפיין data-track מסתיים ב-"wav".
הגדר צבע רקע ייחודי לרצועות שבהן ערך המאפיין data-track מסתיים ב-"flac".

נסו בעצמכם

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Tracks</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-track="a-mp3">Track 1 (MP3)</div>
    <div data-track="a-wav">Track 2 (WAV)</div>
    <div data-track="a-flac">Track 3 (FLAC)</div>
    <div data-track="b-mp3">Track 4 (MP3)</div>
</body>
</html>

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

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

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

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

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

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

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

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

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

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