انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: تحديد العناصر عن طريق الحالة في لغة CSS

Attribute selectors

سوف تتعلم في هذا الدرس كيفه اختيار العناصر علي حسب حالة معينة لإضافة style عليها في لغة CSS وتسمي هذه الطريقة Pseudo Classes.

1 صفوف تعليمية
لغة CSS
2,720 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

attribute

يقوم هذا النوع بعمل اختيار لجميع العناصر التي تحتوي علي attribute ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي علي attribute معين

HTML 
a[target] {
  background-color: yellow;
}
جرّب بنفسك

attribute = value

هذا النوع يقوم باختيار جميع العناصر التي تحتوي attribute بقيمة معينة ففي المثال التالي سوف يتم اختيار جميع العناصر تحتوي علي attribute يساوي "blank_"

HTML 
a[target=_blank] {
  background-color: yellow;
}
جرّب بنفسك

attribute~=value

يقوم هذا النوع من ال selectors باختيار العناصر التي تحتوي علي كلمة معينة يتم تحديدها ففي المثال التالي يتم اختيار جميع العناصر التي تحتوي علي كلمة "flower"

HTML 
[title~=flower] {
  background-color: yellow;
}
جرّب بنفسك

attribue|= valeue

في هذا النوع من ال selectors يتم اختيار جميع العناصر تحتوي علي قيمة معينة في عنصر Lang attribute ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي علي "ar " في قيمة Lang attribute الخاصة بها

HTML 
[lang|=en] {
  background-color: yellow;
}
جرّب بنفسك

attribute^=value

في هذا النوع يتم اختيار جميع العناصر التي تحتوي علي كلمة معينة داخل attribute value الخاص بها ففي المثال التالي سوف يتم اختيار جميع العناصر التي تبدا قيمة ال attribute value الخاصة بها بكلمة "test"

HTML 
div[class^="test"] {
  background: #ffff00;
}
جرّب بنفسك

attribute$=value

في هذا المثال يتم اختيار جميع العناصر التي تنتهي ال attribute value الخاصة بها بكلمة معينة ففي المثال التالي سوف يتم اختيار جميع العناصر التي تنتهي attribute value الخاصة بها بكلمة "test"

HTML 
div[class$="test"] {
  background: #ffff00;
}
جرّب بنفسك

attribute*=value

يقوم هذا النوع باختيار جميع العناصر التي تحتوي علي كلمة معينة بداخل attribute value الخاصة بها ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي بداخل قيمة attribute value الخاصة بها علي كلمة معينة في أي مكان بداخلها

HTML 
div[class*="test"] {
  background: #ffff00;
}
جرّب بنفسك

جميع فقرات هذا الدرس (تحديد العناصر عن طريق الحالة في لغة CSS)