انتخابگرهای خاصیت

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

استایل دهی عناصر HTML با خاصیت های مخصوص

استایل دهی عناصر HTML که خاصیت (به انگلیسی: attribute) یا مقدار خاصیت (به انگلیسی: attribute value) خاصی دارند امکان‌پذیر است.[۱]

انتخابگر [خاصیت] در CSS

انتخابگر [attribute] برای انتخاب عناصر با یک خاصیت مخصوص استفاده می‌شود.

مثال زیر تمامی عناصر <a> با خاصیت هدف (به انگلیسی: target) را انتخاب می‌کند:

مثال
1 a[target] {
2   background-color: yellow;
3 }


انتخابگر خاصیت [attribute="value"] در CSS

انتخابگر [attribute="value"] برای انتخاب عنصری با خاصیت و مقدار (به انگلیسی: value) ویژه ای استفاده می‌شود.

مثال زیر تمامی عناصر <a> با خاصیت target که مقدار آن برابر با "_blank" است را انتخاب می‌کند: target="_blank"

مثال
1 a[target="_blank"] {
2   background-color: yellow;
3 }


انتخابگر [attribute~="value"] در CSS

انتخابگر [attribute~="value"] برای انتخاب عناصری با یک مقدار خاصیت که شامل کلمه‌ای مخصوص می‌شود بکار می رود.

مثال زیر تمامی عناصر با خاصیت title که مقدار آن لیستی از کلمات است که با فاصله از هم جدا شده اند، و یکی آز آنها "flower" است را انتخاب می‌کند:

مثال
1 [title~="flower"] {
2   border: 5px solid yellow;
3 }


مثال بالا تمامی عناصر با 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" از یکدیگر جدا شده باشند!

مثال
1 [class|="top"] {
2   background: yellow;
3 }


انتخابگر [attribute^="value"] در CSS

انتخابگر [attribute^="value"] برای انتخاب عناصری استفاده می‌شود که مقدار خاصیت آنها با مقدار مخصوصی آغاز می‌شود.

مثال زیر تمامی عناصر با خاصیت class که مقدار آن با “top” آغازمی شود را انتخاب می‌کند:

نکته: مقدار می‌تواند کل کلمه را شامل نشود!

مثال
1 [class^="top"] {
2   background: yellow;
3 }


انتخابگر [attribute$="value"] در CSS

انتخابگر [attribute$="value"] برای انتخاب عناصری که مقدار خاصیت آنها با یک مقدار مخصوص پایان می‌پذیرد استفاده می‌شود.

مثال زیر تمامی عناصر با خاصیت Class که مقدار آنها با عبارت "test" پایان بپذیرد را انتخاب می‌کند:

نکته: مقدار می‌تواند کل کلمه را شامل نشود!

مثال
1 [class$="test"] {
2   background: yellow;
3 }


انتخابگر [attribute*="value"] در CSS

انتخابگر [attribute*="value"] برای انتخاب عناصری که مقدار خاصیت آنها شامل یک مقدار مخصوص است استفاده می‌شود.

مثال زیر تمامی عناصری که مقدار خاصیت class آنها شامل عبارت "te" است را انتخاب می‌کند:

نکته: مقدار می‌تواند کل کلمه را شامل نشود!

مثال
1 [class*="te"] {
2   background: yellow;
3 }


استایل دهی فرم ها

انتخابگرهای خاصیت برای استایل دهی فرم‌ها بدون استفاده از class یا ID بسیار کاربردی هستند:

مثال
 1 input[type="text"] {
 2   width: 150px;
 3   display: block;
 4   margin-bottom: 10px;
 5   background-color: yellow;
 6 }
 7 
 8 input[type="button"] {
 9   width: 120px;
10   margin-left: 35px;
11   display: block;
12 }


نکته: آموزش فرم‌های 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" می‌شود را انتخاب می‌کند


منابع آموزشی