آموزش CSS مبتدی : انتخابگرهای ویژگی

همانطور که از مطالعه HTML می‌دانید، عناصر می‌توانند ویژگی‌هایی داشته باشند که جزئیات بیشتری در مورد عنصری که نشانه‌گذاری می‌شود، ارائه می‌دهند. در CSS می‌توانید از انتخابگرهای ویژگی برای هدف قرار دادن عناصر با ویژگی‌های خاص استفاده کنید. این درس به شما نشان می‌دهد که چگونه از این انتخابگرهای بسیار مفید استفاده کنید.

انتخابگرهای حضور و ارزش

این انتخابگرها امکان انتخاب یک عنصر را بر اساس وجود یک ویژگی به تنهایی (برای مثال href) یا بر اساس تطابق‌های مختلف با مقدار ویژگی فراهم می‌کنند.

انتخابگر	مثال	توضیحات
[attr]	a[title]	با عناصری که دارای ویژگی attr هستند (که نام آن، مقدار درون کروشه است) تطبیق می‌یابد.
[attr=value]	a[href="https://example.com"]	با عناصری که دارای ویژگی attr هستند و مقدار آنها دقیقاً برابر با value است - رشته‌ای که درون علامت نقل قول قرار دارد - تطبیق می‌یابد.
[attr~=value]	p[class~="special"]	با عناصری تطبیق می‌یابد که دارای ویژگی attr باشند و مقدار آنها دقیقاً برابر با value باشد، یا در فهرست مقادیر خود (که با فاصله از هم جدا شده‌اند) حاوی value باشند.
[attr\|=value]	div[lang\|="zh"]	با عناصری تطبیق می‌یابد که دارای ویژگی attr باشند و مقدار آنها دقیقاً برابر با value باشد یا با value شروع شود و بلافاصله پس از آن یک خط فاصله قرار گیرد.

در مثال زیر می‌توانید نحوه‌ی استفاده از این انتخابگرها را مشاهده کنید. - با استفاده از می‌توانیم هر آیتم لیست را با ویژگی class مطابقت دهیم. این با همه آیتم‌های لیست به جز مورد اول مطابقت دارد. - با انتخابگری با کلاس a مطابقت دارد، اما با انتخابگری با کلاس a که کلاس دیگری با فاصله از هم جدا شده است به عنوان بخشی از مقدار مطابقت ندارد. این مورد، دومین مورد لیست را انتخاب می‌کند. - با کلاس a مطابقت دارد، اما با مقداری که شامل کلاس a به عنوان بخشی از لیست جدا شده با فاصله است نیز مطابقت دارد. این مورد، موارد لیست دوم و سوم را انتخاب می‌کند.

HTML

CSS

سعی کنید CSS بالا را ویرایش کنید تا قانونی اضافه کنید که فقط آیتم‌های لیست با مقدار ویژگی کلاس ab را انتخاب کند و به آنها رنگ متن سفید و رنگ پس‌زمینه بنفش بدهد.

انتخابگرهای تطبیق زیررشته

این انتخابگرها امکان تطبیق پیشرفته‌تر زیررشته‌ها را درون مقدار ویژگی شما فراهم می‌کنند. برای مثال، اگر کلاس‌های box-warning و box-error داشتید و می‌خواستید هر چیزی را که با رشته "box-" شروع می‌شود، تطبیق دهید، می‌توانید از برای انتخاب هر دوی آنها استفاده کنید (یا همانطور که در بخش بالا توضیح داده شد، از استفاده کنید).

انتخابگر	مثال	توضیحات
[attr^=value]	li[class^="box-"]	با عناصری که دارای ویژگی attr هستند و مقدار آنها با value شروع می‌شود، تطبیق می‌یابد.
[attr$=value]	li[class$="-box"]	با عناصری که دارای ویژگی attr هستند و مقدار آنها با value خاتمه می‌یابد، تطبیق می‌یابد.
[attr*=value]	li[class*="box"]	با عناصری که دارای ویژگی attr هستند و مقدار آنها شامل مقداری در هر کجای رشته است، تطبیق می‌یابد.

مثال بعدی نحوه‌ی استفاده از این انتخابگرها را نشان می‌دهد: - با هر مقدار ویژگی که با a شروع شود، مطابقت دارد، بنابراین با دو مورد اول لیست مطابقت دارد. - با هر مقدار ویژگی که با a تمام شود، مطابقت دارد، بنابراین با اولین و سومین مورد لیست مطابقت دارد. - با هر مقدار ویژگی که a در هر جایی از رشته ظاهر شود، مطابقت دارد، بنابراین با تمام موارد لیست ما مطابقت دارد.

HTML

CSS

سعی کنید CSS بالا را ویرایش کنید تا قانونی اضافه شود که فقط آیتم‌های لیست را با مقدار ویژگی class که در انتهای آن b یا c وجود دارد انتخاب کند و به آنها یک حاشیه مشکی، یکدست و به عرض 2 پیکسل بدهد. برای حل این مشکل، ممکن است مجبور شوید از یک لیست انتخابگر استفاده کنید.