محددات السمات Attribute Selectors

ما هي محددات السمات؟

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

[attribute]

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

مثال
تشغيل
  1. [title] {
  2. color: blue;
  3. }

المحدد [title] في المثال أعلاه يتطابق مع جميع العناصر التي لها سمة title .
يمكننا أيضًا تقييد هذا التحديد على عنصر HTML معين عن طريق وضع محدد السمة بعد محدد نوع العنصر ، كما في المثال التالي:

مثال
تشغيل
  1. abbr[title] {
  2. color: red;
  3. }

في المثال اعلاه يتطابق المحدد abbr[title] فقط مع عناصر <abbr> التي لها السمة title.

[attribute="value"]

يمكنك استخدام المعامل = لجعل محدد السمة يطابق عنصرًا تساوي قيمة السمة الخاصة به تمامًا القيمة المحددة:

مثال
تشغيل
  1. input[type="submit"] {
  2. border: 1px solid green;;
  3. }

المحدد في المثال أعلاه يتطابق مع جميع عناصر <input> التي لها السمة type بقيمة تساوي submit.

[attribute~="value"]

يمكننا استخدام المعامل ~= لجعل محدد السمة يطابق أي عنصر تكون قيمة السمة الخاصة به عبارة عن قائمة من القيم المفصولة بمسافات (مثل class="alert warning" ) ، واحدة منها تساوي تمامًا القيمة المحددة:

مثال
تشغيل
  1. [class~="warning"] {
  2. color: #fff;
  3. background: red;
  4. }

يطابق المحدد في المثال اعلاه أي عنصر HTML بسمة class تحتوي على قيم مفصولة بمسافات ، أحدها warning.
على سبيل المثال ، يطابق العناصر التي تحتوي على قيم الفئة warning و alert warning .... الخ

[attribute|="value"]

يمكنك استخدام المعامل |= لجعل محدد السمة يطابق أي عنصر تحتوي السمة الخاصة به على قائمة قيم مفصولة بشرطة - تبدأ بالقيمة المحددة:

مثال
تشغيل
  1. [lang|=ar] {
  2. color: #fff;
  3. background: blue;
  4. }

المحدد في المثال أعلاه يتطابق مع جميع العناصر التي تحتوي على سمة lang التي تحتوي على قيمة تبدأ بـ ar ، سواء كانت تلك القيمة متبوعة بشرطة والمزيد من الأحرف أم لا. بمعنى آخر ، فإنه يطابق العناصر ذات السمة lang التي تحتوي على القيم ar و ar-JO و ar-EG وما إلى ذلك ولكن ليس JO-ar و EG-ar

[attribute^="value"]

يمكنك استخدام المعامل ^= لجعل محدد السمة يطابق عنصرًا تبدأ قيمة السمة الخاصة به بقيمة محددة ولا يجب أن تكون كلمة كاملة.

مثال
تشغيل
  1. a[href^="http://"] {
  2. background: url("external-link.png") 100% 50% no-repeat;
  3. padding-right: 15px;
  4. }

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

[attribute$="value"]

أيضا يمكننا استخدام المعامل $= لتحديد جميع العناصر التي تنتهي قيمة سماتها بقيمة محددة ولا يجب أن تكون كلمة كاملة.

مثال
تشغيل
  1. a[href$=".pdf"] {
  2. background: url("pdf.png") 0 50% no-repeat;
  3. padding-left: 25px;
  4. }

المحدد في المثال أعلاه سيحدد جميع عناصر الرابط التشعبي <a> التي ترتبط بمستند PDF ويضيف رمز PDF صغيرًا لتوفير تلميحات للمستخدم حول محتوى الرابط.

[attribute*="value"]

يمكننا استخدام المعامل *= لجعل محدد السمة يطابق جميع العناصر التي تحتوي قيمة السمة الخاصة بها على قيمة محددة.

مثال
تشغيل
  1. [class*="warning"]{
  2. color: #fff;
  3. background: red;
  4. }

في المثال أعلاه يتطابق المحدد مع جميع عناصر HTML التي تحتوي السمة class التي تحتوي على القيمة warning. على سبيل المثال ، يتطابق مع العناصر التي تحتوي على قيم السمة class مثل warning أو alert warning ، أو alert-warning أو alert_warning وما إلى ذلك.

تصميم النماذج مع محددات السمات

تُعد محددات السمات مفيدة بشكل خاص لتصميم النماذج بدون الحاجة لإضافة السمات class أو id:

مثال
تشغيل
  1. input[type="text"], input[type="password"]{
  2. width: 150px;
  3. display: block;
  4. margin-bottom: 10px;
  5. background: yellow;
  6. }
  7. input[type="submit"]{
  8. padding: 2px 10px;
  9. border: 1px solid #804040;
  10. background: #ff8040;
  11. }
« التالي السابق »