محددات قيم الخصائص 3
الدرس 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> التي تحتوي على سمات فئة "tag fruit" سيكون لون نصها أخضر.
التحدي
سهلأنت مكلف بتنسيق قائمة من المنتجات على صفحة ويب. يتم تمثيل كل منتج بواسطة عنصر <div> مع سمة data-tags تشير إلى علاماته (على سبيل المثال، "electronics"، "clothing"، "accessories"). هدفك هو تنسيق المنتجات بشكل مختلف بناءً على علاماتها باستخدام محددات تحتوي على قيمة السمة (attribute value containing selectors).
مهمة CSS الخاصة بك هي:
- إعطاء لون خلفية فريد للمنتجات التي تحتوي سمة
data-tagsالخاصة بها على "electronics". - إعطاء إطار (border) فريد للمنتجات التي تحتوي سمة
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
4محددات الخصائص
مقدمة في محددات الخصائصالتواجد والقيم المطابقةمحددات قيم الخصائصمحددات قيم الخصائص 2محددات قيم الخصائص 3