انتخابگر ویژگی [ ] در CSS
انتخابگر ویژگی (attribute selectors)، برای انتخاب المان با ویژگی مشخص استفاده می شود.
به طور مثال برای انتخاب تگ های a که دارای ویژگی target هستند، می توان از نمونه کد زیر استفاده کرد.
a[target] {
background: red;
}انتخابگر [attribute=value] در CSS
انتخابگر ویژگی را نیز می توان با مقدار مشخص کرد.
a[target="_blank"] {
background: red;
}انتخابگر [attribute~=value] در CSS
با استفاده از علامت ~= در انتخابگر ویژگی، می توان المان هایی که مقدار آن ها شامل یا برابر کلمه مشخص شده است را مشخص کرد.
نکته: مقدار حتما باید یک کلمه کامل باشد. جداکننده در علامت ~= باید فاصله (space) باشد. برای درک بهتر، نمونه کد زیر را مشاهده کنید.
a[title~="visit"] {
background: red;
}انتخابگر [attribute|=value] در CSS
با استفاده از علامت |= در انتخابگر ویژگی ، می توان المان هایی که مقدار آن ها شامل یا برابر کلمه مشخص شده است را مشخص کرد.
نکته: مقدار حتما باید یک کلمه کامل باشد. جداکننده در علامت |= باید خط کوچک یا هایفن (-) باشد. برای درک بهتر، نمونه کد زیر را مشاهده کنید.
a[title|="visit"] {
background: red;
}انتخابگر [attribute^=value] در CSS
با استفاده از علامت ^= در انتخابگر ویژگی، می توان المان هایی که مقدار آن ها با کلمه مشخص شده شروع شده است را مشخص کرد.
نکته: لازم نیست مقدار یک کلمه کامل باشد.
a[title^="visit"] {
background: red;
}انتخابگر [attribute$=value] در CSS
با استفاده از علامت $= در انتخابگر ویژگی، می توان المان هایی که مقدار آن ها با کلمه مشخص شده تمام شده است را مشخص کرد.
نکته: لازم نیست مقدار یک کلمه کامل باشد.
a[title$="visit"] {
background: red;
}انتخابگر [attribute*=value] در CSS
با استفاده از علامت *= در انتخابگر ویژگی، می توان المان هایی که مقدار آن ها شامل یا برابر کلمه مشخص شده است را مشخص کرد.
نکته: لازم نیست مقدار یک کلمه کامل باشد.
a[title*="vis"] {
background: red;
}استایل دهی به فرم ها در CSS
انتخابگرهای ویژگی می توانند برای استایل دادن به فرم ها و اینپوت ها مفید باشند.
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}خلاصه درس
| انتخابگر ها | مثال | توضیحات مثال |
| [attribute] | [target] |
همه المان های دارای ویژگی target را انتخاب می کند. |
|
["attribute="value] |
["target="_blank] |
همه المان های دارای ویژگی target="_blank" را انتخاب می کند. |
| ["attribute~="value] | ["title~="flower] |
همه المان هایی که ویژگی title آن ها شامل مقدار flower به تنهایی یا با فاصله هستند را انتخاب می کند. |
| ["attribute|="value] | ["lang|="en] |
همه المان هایی که ویژگی lang آن ها شامل مقدار en به تنهایی یا با - هستند را انتخاب می کند. |
| ["attribute^="value] | a[href^="https"] | همه المان هایی که ویژگی href آن ها با مقدار https شروع شده است را انتخاب می کند. |
| ["attribute$="value] | a[href$=".pdf"] | همه المان هایی که ویژگی href آن ها با مقدار .pdf تمام شده است را انتخاب می کند. |
| ["attribute*="value] | a[href*="pnldev"] | همه المان هایی که ویژگی href آن ها شامل مقدار pnldev است را انتخاب می کند. |
احسان اسلامی
