محددات قيم الخصائص
الدرس 13 من 15 في دورة محددات CSS على Coddy.
في هذا الدرس، ستتعمق في مفهوم محددات قيمة السمة التي تبدأ بـ (attribute value starting with selectors). تتيح لك هذه التقنية استهداف عناصر 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;على هذه الأزرار.
والنتيجة هي أن جميع الأزرار الثلاثة سيكون لها لون خلفية رمادي فاتح، لأن قيم سمة الفئة الخاصة بها تبدأ بـ "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محددات الخصائص
مقدمة في محددات الخصائصالتواجد والقيم المطابقةمحددات قيم الخصائصمحددات قيم الخصائص 2محددات قيم الخصائص 3