انتخابگرهای صفتی (Attr Selectors)

انتخاب‌کننده‌های Attribute در CSS

با استفاده از انتخاب‌کننده‌های Attribute در CSS، می‌توانیم عناصری را که دارای ویژگی‌های خاص یا مقدارهای مشخصی از ویژگی‌ها هستند، انتخاب و استایل دهیم.

انتخاب‌کننده [attribute]

انتخاب عناصر HTML که دارای ویژگی خاصی هستند.

مثال:

a[target] {
  background-color: yellow;
}

در این مثال، تمام عناصر <a> که دارای ویژگی target هستند، انتخاب می‌شوند و رنگ پس‌زمینه آن‌ها زرد می‌شود.

انتخاب‌کننده [attribute="value"]

انتخاب عناصری که ویژگی خاصی با مقدار مشخصی دارند.

مثال:

a[target="_blank"] {
  background-color: yellow;
}

در این مثال، فقط آن دسته از عناصر <a> که ویژگی target و مقدار آن _blank است، انتخاب می‌شوند و پس‌زمینه زرد دریافت می‌کنند.

انتخاب‌کننده [attribute~="value"]

انتخاب عناصری که مقدار ویژگی آن‌ها شامل یک کلمه خاص در یک لیست با فاصله جدا شده است.

مثال:

[title~="flower"] {
  border: 5px solid yellow;
}

این مثال، تمام عناصری که در ویژگی title آن‌ها کلمه “flower” (به عنوان یک کلمه مجزا) وجود دارد را انتخاب می‌کند و به آن‌ها حاشیه زرد ۵ پیکسل می‌دهد.

انتخاب‌کننده [attribute|="value"]

انتخاب عناصری که مقدار ویژگی آن‌ها دقیقاً برابر با مقدار مشخص‌شده است یا با آن مقدار و یک خط فاصله شروع می‌شود.

مثال:

[class|="top"] {
  background: yellow;
}

در این مثال، عناصری که کلاس آن‌ها top یا با top- شروع می‌شود، انتخاب می‌شوند و پس‌زمینه زرد دریافت می‌کنند.

انتخاب‌کننده [attribute^="value"]

انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار مشخص‌شده شروع می‌شود.

مثال:

[class^="top"] {
  background: yellow;
}

در این مثال، عناصری که مقدار ویژگی class آن‌ها با top شروع می‌شود، انتخاب می‌شوند.

انتخاب‌کننده [attribute$="value"]

انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار مشخص‌شده به پایان می‌رسد.

مثال:

[class$="test"] {
  background: yellow;
}

در این مثال، عناصری که مقدار ویژگی class آن‌ها با test به پایان می‌رسد، انتخاب می‌شوند.

انتخاب‌کننده [attribute="value"]

انتخاب عناصری که مقدار ویژگی آن‌ها شامل مقدار مشخص‌شده است.

مثال:

[class*="te"] {
  background: yellow;
}

در این مثال، عناصری که در مقدار ویژگی class آن‌ها رشته “te” وجود دارد، انتخاب می‌شوند.

استایل‌دهی به فرم‌ها با استفاده از Attribute Selectors

انتخاب‌کننده‌های Attribute برای استایل‌دهی فرم‌ها که کلاس یا ID ندارند، بسیار مفید هستند.

مثال:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

در این مثال، استایل‌دهی برای فیلدهای متنی (input[type="text"]) و دکمه‌ها (input[type="button"]) انجام شده است.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.