בוררי ערכי מאפיינים
שיעור 13 מתוך 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 שלהם מתחילים ב-"btn-" */
[class^="btn-"] {
background-color: lightgray;
}בדוגמאות הקוד שלעיל:
- מוגדרים שלושה כפתורים עם ערכים שונים של מאפיין class.
- כלל ה-CSS
[class^="btn-"]בוחר רכיבים שהערך של מאפייןclassשלהם מתחיל ב-"btn-". הוא מחיל על הכפתורים האלה את הסגנוןbackground-color: lightgray;.
כתוצאה מכך, לכל שלושת הכפתורים יהיה צבע רקע אפור בהיר, מכיוון שערכי מאפיין class שלהם מתחילים ב-"btn-".
אתגר
קלנניח שיש לך את מבנה ה-HTML הבא עבור רשימת פריטים. המטרה שלך היא לעצב פריטי רשימה עם ערך מאפיין data-category שמתחיל ב-"fruit-". החל צבע רקע ייחודי על פריטי הרשימה האלה באמצעות CSS.
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<title>Attribute Value Starting With Selector</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<ul>
<li data-category="fruit-apple">Apple</li>
<li data-category="vegetable-carrot">Carrot</li>
<li data-category="fruit-banana">Banana</li>
<li data-category="fruit-orange">Orange</li>
<li data-category="grain-rice">Rice</li>
</ul>
</body>
</html>
כל השיעורים ביחידה בוררי CSS
4בוררי מאפיינים
מבוא לבוררי מאפייניםנוכחות וערכים מדויקיםבוררי ערכי מאפייניםבוררי ערכי מאפיינים IIבוררי ערכי מאפיינים IIIתרגלו בעצמכם: Web אונליין