محددات قيم الخصائص 2

الدرس 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; على هذه الأزرار.

ونتيجة لذلك، سيكون للزر الذي يحمل قيمة سمة الفئة "btn-tertiary" لون خلفية مرجاني فاتح (light coral).

التحدي

سهل

لقد تم تزويدك بقائمة من المسارات الموسيقية على صفحة ويب. يتم تمثيل كل مسار بواسطة عنصر <div> يحتوي على سمة data-track تشير إلى تنسيقه (على سبيل المثال، "mp3" أو "wav" أو "flac"). مهمتك هي تنسيق المسارات بشكل مختلف بناءً على تنسيقها باستخدام محددات القيمة التي تنتهي بـ (attribute value ending with selectors).

مهمتك في 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محددات الخصائص

مقدمة في محددات الخصائص التواجد والقيم المطابقة محددات قيم الخصائصمحددات قيم الخصائص 2محددات قيم الخصائص 3

2المحددات البسيطة

محددات النوع محددات Class محددات ID المحددات العامة

3محددات الربط (Combinator Selectors)

محدد الابن (Child selector)محدد الأحفاد (Descendant selector)محدد الشقيق المجاور (Adjacent sibling selector)محدد الشقيق العام (General sibling selector)