انتخابگرهای خاصیت
محتویات
- ۱ استایل دهی عناصر HTML با خاصیت های مخصوص
- ۲ انتخابگر [خاصیت] در CSS
- ۳ انتخابگر خاصیت [attribute="value"] در CSS
- ۴ انتخابگر [attribute~="value"] در CSS
- ۵ انتخابگر [attribute|="value"] در CSS
- ۶ انتخابگر [attribute^="value"] در CSS
- ۷ انتخابگر [attribute$="value"] در CSS
- ۸ انتخابگر [attribute*="value"] در CSS
- ۹ استایل دهی فرم ها
- ۱۰ خود را با تمرینها امتحان کنید!
- ۱۱ تمامی انتخابگرهای خاصیت در CSS
- ۱۲ منابع آموزشی
استایل دهی عناصر HTML با خاصیت های مخصوص
استایل دهی عناصر HTML که خاصیت (به انگلیسی: attribute) یا مقدار خاصیت (به انگلیسی: attribute value) خاصی دارند امکانپذیر است.[۱]
انتخابگر [خاصیت] در CSS
انتخابگر [attribute]
برای انتخاب عناصر با یک خاصیت مخصوص استفاده میشود.
مثال زیر تمامی عناصر <a> با خاصیت هدف (به انگلیسی: target) را انتخاب میکند:
انتخابگر خاصیت [attribute="value"] در CSS
انتخابگر [attribute="value"]
برای انتخاب عنصری با خاصیت و مقدار (به انگلیسی: value) ویژه ای استفاده میشود.
مثال زیر تمامی عناصر <a> با خاصیت target که مقدار آن برابر با "_blank" است را انتخاب میکند: target="_blank"
انتخابگر [attribute~="value"] در CSS
انتخابگر [attribute~="value"]
برای انتخاب عناصری با یک مقدار خاصیت که شامل کلمهای مخصوص میشود بکار می رود.
مثال زیر تمامی عناصر با خاصیت title که مقدار آن لیستی از کلمات است که با فاصله از هم جدا شده اند، و یکی آز آنها "flower" است را انتخاب میکند:
مثال بالا تمامی عناصر با title="summer flower"، title="flower" و title="flower new" را تطبیق میدهد، اما موارد title="my-flower" یا title="flowers" را تطبیق نمیدهد.
انتخابگر [attribute|="value"] در CSS
انتخابگر [attribute|="value"]
برای انتخاب عناصری استفاده میشود که خاصیت ویژه ای در آنها با مقدار مخصوصی آغاز میشود.
مثال زیر تمامی عناصر با خاصیت class که مقدار آن با عبارت "top" آغاز میشود را انتخاب میکند:
نکته: مقدار خاصیت میبایست کل کلمه را شامل شود، یا به صورت تنها، مانند class="top"، یا با استفاده از علامت خط تیره (-)، مانند class="top-text" از یکدیگر جدا شده باشند!
انتخابگر [attribute^="value"] در CSS
انتخابگر [attribute^="value"]
برای انتخاب عناصری استفاده میشود که مقدار خاصیت آنها با مقدار مخصوصی آغاز میشود.
مثال زیر تمامی عناصر با خاصیت class که مقدار آن با “top” آغازمی شود را انتخاب میکند:
نکته: مقدار میتواند کل کلمه را شامل نشود!
انتخابگر [attribute$="value"] در CSS
انتخابگر [attribute$="value"]
برای انتخاب عناصری که مقدار خاصیت آنها با یک مقدار مخصوص پایان میپذیرد استفاده میشود.
مثال زیر تمامی عناصر با خاصیت Class که مقدار آنها با عبارت "test" پایان بپذیرد را انتخاب میکند:
نکته: مقدار میتواند کل کلمه را شامل نشود!
انتخابگر [attribute*="value"] در CSS
انتخابگر [attribute*="value"]
برای انتخاب عناصری که مقدار خاصیت آنها شامل یک مقدار مخصوص است استفاده میشود.
مثال زیر تمامی عناصری که مقدار خاصیت class آنها شامل عبارت "te" است را انتخاب میکند:
نکته: مقدار میتواند کل کلمه را شامل نشود!
استایل دهی فرم ها
انتخابگرهای خاصیت برای استایل دهی فرمها بدون استفاده از class یا ID بسیار کاربردی هستند:
نکته: آموزش فرمهای CSS را برای مثالهای بیشتری در مورد نحوه استایل دهی فرمها با CSS را ببینید.
خود را با تمرینها امتحان کنید!
تمامی انتخابگرهای خاصیت در CSS
انتخابگر | مثال | توضیح مثال |
---|---|---|
[''attribute''] | [target] | تمامی عناصر با یک خاصیت به خصوص را انتخاب میکند |
[''attribute''=''value''] | [target=_blank] | تمامی عناصر با خاصیت target="_blank" را انتخاب میکند. |
[''attribute''~=''value''] | [title~=flower] | تمام عناصر با خاصیت title شامل کلمه "flower" را انتخاب میکند |
[attribute|=value] | [lang|=en] | تمامی عناصری که خاصیت lang آنها با عبارت "en" آغاز شود را انتخاب میکند |
[''attribute''^=''value''] | a[href^="https"] | هر عنصر <a> که مقدار ویژگی href آن با "https" آغاز شود را انتخاب میکند |
[''attribute''$=''value''] | a[href$=".pdf"] | هر عنصر <a> که مقدار ویژگی href آن با ".pdf" پایان میپذیرد را انتخاب میکند |
[''attribute''*=''value''] | a[href*="wikicod"] | هر عنصر <a> که مقدار ویژگی href آن شامل رشته "wikicod" میشود را انتخاب میکند |
منابع آموزشی