انتخاب‌کننده‌های 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"]) انجام شده است.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام