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

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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" می‌شود را انتخاب می‌کند

صفحهٔ بعد»

«صفحهٔ قبل