📘 جلسه هفدهم – Attribute Selectors (بخش دوم)

در این جلسه چهار نوع پیشرفته از Attribute Selector بررسی شد:

1️⃣ [attr|="value"]

• انتخاب المان‌هایی که مقدار attribute آن‌ها:
  • دقیقاً برابر value باشد.
  • یا با value شروع شود و بعدش یک - بیاید.

[class|="text"] { color: red; }

• class="text"
  class="text-container"

2️⃣ [attr^="value"]

• انتخاب المان‌هایی که مقدار attribute آن‌ها با value شروع شود.
• نیازی به - یا جداکننده نیست.

[class^="text"] { color: red; }

• class="text"
  class="textname"
  class="text-container"

3️⃣ [attr$="value"]

• انتخاب المان‌هایی که مقدار attribute آن‌ها با value تمام شود.

[class$="text"] { color: red; }

• class="text"
  class="nametext"
  class="name-text"

4️⃣ [attr*="value"]

• انتخاب المان‌هایی که مقدار attribute آن‌ها هرجایی شامل value باشد.

[class*="text"] { color: red; }

• class="natextme"
  class="name-text"
  class="nametext"