البرمجة

محددات الخاصية في CSS

اخر تحديث 14/05/2025
24 تمت قراءة 4 دقيقة

مقدمة عن محددات الخاصية في CSS

تعتبر محددات الخاصية (Attribute Selectors) في CSS من الأدوات القوية التي تتيح للمطورين تحديد العناصر بناءً على خصائص معينة تحتوي عليها. توفر هذه المحددات طريقة مرنة ودقيقة لاختيار العناصر في الصفحة بناءً على قيم خصائصها، مما يساعد في تحسين أداء الصفحة وتسهيل التحكم في الأنماط بشكل أكثر دقة.

في هذا المقال، سوف نتناول شرحًا تفصيليًا لمحددات الخاصية في CSS، متناولين أنواعها المختلفة وكيفية استخدامها في تصميم الصفحات الإلكترونية، بالإضافة إلى أمثلة تطبيقية توضح كيفية الاستفادة من هذه الميزة في العمل اليومي لمطوري الويب.

مواضيع ذات صلة

تعريف محددات الخاصية Attribute Selectors

محددات الخاصية في CSS هي أدوات تتيح لك تحديد العناصر بناءً على وجود خاصية معينة أو قيمة محددة لتلك الخاصية في العنصر. يسمح لك ذلك بتطبيق الأنماط على العناصر التي تحتوي على خصائص معينة، مما يعزز من مرونة التصميم وقدرته على التكيف مع التغييرات.

على سبيل المثال، إذا كنت ترغب في تطبيق نمط معين على جميع العناصر التي تحتوي على خاصية data-* معينة، يمكنك استخدام محدد الخاصية في CSS لاستهداف تلك العناصر بسهولة دون الحاجة إلى إضافة فئات (classes) أو معرفات (IDs).

صيغة محددات الخاصية في CSS

تستخدم محددات الخاصية في CSS الصيغة التالية:

css
element[attribute="value"] {
    /* الأنماط هنا */
}

  • element: هو العنصر الذي ترغب في تحديده.

  • attribute: هو اسم الخاصية التي تريد استهدافها.

  • "value": هو القيمة التي يجب أن تحتوي عليها الخاصية لتطبيق الأنماط.

على سبيل المثال، لتطبيق نمط على جميع العناصر التي تحتوي على الخاصية href في a (الروابط)، يمكنك استخدام الصيغة التالية:

css
a[href] {
    color: blue;
}

هذا المثال سيجعل جميع الروابط () التي تحتوي على الخاصية href تتحول إلى اللون الأزرق.

أنواع محددات الخاصية في CSS

تحتوي CSS على عدة أنواع من محددات الخاصية التي توفر خيارات متنوعة للمطورين. سنستعرض أبرز هذه الأنواع وكيفية استخدامها.

1. محددات الخاصية البسيطة

يتم استخدام هذا النوع من محددات الخاصية عندما ترغب في استهداف العناصر التي تحتوي على خاصية معينة بغض النظر عن قيمتها. الصيغة هي:

css
element[attribute] {
    /* الأنماط هنا */
}

على سبيل المثال، لتطبيق نمط على جميع العناصر التي تحتوي على خاصية title:

css
a[title] {
    text-decoration: underline;
}

هذا يعني أن أي رابط يحتوي على الخاصية title سيصبح تحته خط.

2. محددات الخاصية بقيمة معينة

في هذا النوع، يمكن تحديد العناصر بناءً على قيمة معينة لخاصية معينة. الصيغة هي:

css
element[attribute="value"] {
    /* الأنماط هنا */
}

على سبيل المثال، لتطبيق نمط على الروابط التي تحتوي على خاصية href بقيمة معينة مثل “https://www.example.com“:

css
a[href="https://www.example.com"] {
    color: red;
}

سيتم تلوين جميع الروابط التي تشير إلى “https://www.example.com” باللون الأحمر.

3. محددات الخاصية التي تحتوي على قيمة معينة

في هذا النوع، يمكن تحديد العناصر التي تحتوي على خاصية معينة ويجب أن تحتوي تلك الخاصية على قيمة معينة جزئيًا. الصيغة هي:

css
element[attribute*="value"] {
    /* الأنماط هنا */
}

هذا يعني أن الخاصية يجب أن تحتوي على القيمة المحددة في أي جزء منها. على سبيل المثال:

css
a[href*="example"] {
    color: green;
}

سيتم تلوين جميع الروابط التي تحتوي على “example” في قيمة href باللون الأخضر.

4. محددات الخاصية التي تبدأ بقيمة معينة

في هذا النوع، يمكن تحديد العناصر التي تحتوي على خاصية معينة تبدأ بقيمة معينة. الصيغة هي:

css
element[attribute^="value"] {
    /* الأنماط هنا */
}

على سبيل المثال، لتطبيق نمط على جميع الروابط التي تبدأ قيمة href الخاصة بها بـ “https”:

css
a[href^="https"] {
    font-weight: bold;
}

هذا يعني أن أي رابط يبدأ بـ “https” سيتحول إلى نص عريض.

5. محددات الخاصية التي تنتهي بقيمة معينة

يتم استخدام هذا النوع لتحديد العناصر التي تحتوي على خاصية معينة وتنتهي بقيمة معينة. الصيغة هي:

css
element[attribute$="value"] {
    /* الأنماط هنا */
}

على سبيل المثال، لتطبيق نمط على جميع الروابط التي تنتهي بـ “.jpg”:

css
a[href$=".jpg"] {
    border: 1px solid black;
}

سيتم إضافة حد أسود على جميع الروابط التي تشير إلى ملفات صور بصيغة .jpg.

6. محددات الخاصية التي تحتوي على كلمة معينة

تتيح لك هذه المحددات تحديد العناصر التي تحتوي على قيمة تتضمن كلمة معينة في خاصية متعددة القيم، مثل class أو rel. الصيغة هي:

css
element[attribute~="value"] {
    /* الأنماط هنا */
}

على سبيل المثال، لتطبيق نمط على جميع العناصر التي تحتوي على الخاصية class التي تتضمن الكلمة “highlight”:

css
div[class~="highlight"] {
    background-color: yellow;
}

سيتم تلوين جميع العناصر التي تحتوي على فئة highlight باللون الأصفر.

7. محددات الخاصية التي تحتوي على حرف معين

يمكنك استخدام هذا النوع من محددات الخاصية لتحديد العناصر التي تحتوي على خاصية معينة بها قيمة تحتوي على حرف معين. الصيغة هي:

css
element[attribute|="value"] {
    /* الأنماط هنا */
}

على سبيل المثال، لتطبيق نمط على العناصر التي تحتوي على خاصية lang التي تبدأ بـ “en” (مثل “en-US” أو “en-GB”):

css
div[lang|="en"] {
    font-style: italic;
}

سيتم تفعيل النمط على العناصر التي تحتوي على خاصية lang التي تبدأ بـ “en”.

أهمية محددات الخاصية في CSS

تعتبر محددات الخاصية من الأدوات القوية في CSS لأنها تتيح للمطورين المزيد من المرونة في تحديد العناصر استنادًا إلى خصائصها. من خلال هذه المحددات، يمكنك تطبيق الأنماط بطريقة دقيقة وفعالة على العناصر دون الحاجة إلى استخدام فئات أو معرفات إضافية.

يمكن لمحددات الخاصية أن تكون مفيدة بشكل خاص عندما تعمل مع عناصر تحتوي على سمات ديناميكية أو عندما لا ترغب في إضافة المزيد من التعريفات اليدوية مثل الفئات أو المعرفات. كما أنها تساعد في تحسين تجربة المستخدم من خلال تقديم تصميمات متجاوبة وأكثر تخصيصًا.

مثال عملي على استخدام محددات الخاصية

نفترض أنك تقوم بتطوير صفحة تحتوي على عدة روابط لأقسام مختلفة. كل رابط يحتوي على خاصية data-category التي تشير إلى الفئة التي ينتمي إليها الرابط. باستخدام محددات الخاصية، يمكنك بسهولة تطبيق الأنماط على الروابط استنادًا إلى فئاتها.

HTML:

html
<a href="#" data-category="sports">Sportsa>
<a href="#" data-category="news">Newsa>
<a href="#" data-category="entertainment">Entertainmenta>

CSS:

css
a[data-category="sports"] {
    color: green;
}

a[data-category="news"] {
    color: blue;
}

a[data-category="entertainment"] {
    color: orange;
}

من خلال هذه الطريقة، يمكنك تحديد روابط الفئات المختلفة وتطبيق الأنماط الخاصة بكل فئة على حدة دون الحاجة إلى إضافة فئات إضافية.

خاتمة

محددات الخاصية في CSS تعتبر أداة قوية ومرنة لانتقاء العناصر في الصفحة بناءً على خصائصها. من خلال استخدامها بشكل صحيح، يمكن للمطورين تحقيق تصميمات مخصصة ودقيقة دون الحاجة إلى استخدام الكثير من الفئات أو المعرفات. تساعد هذه الأدوات في تبسيط التصميم وزيادة كفاءة كتابة الأكواد، مما يجعل صفحات الويب أكثر استجابة وسهولة في التخصيص والتعديل.

اخر تحديث 14/05/2025
24 تمت قراءة 4 دقيقة