فرادرسسلکتورهای خصوصیت در CSS — آموزش CSS (بخش هشتم)
همچنان که از یادگیری HTML می‌دانیم، عناصر می‌توانند خصوصیت‌هایی داشته باشند که جزییات بیشتری در مورد عنصری که نشانه‌گذاری می‌شود ارائه کنند. در CSS می‌توانید از سلکتورهای خصوصیت (Attribute Selectors) برای هدف‌گیری عناصر با خصوصیت‌های معین استفاده کنید. در این بخش از سری مقالات آموزش CSS در مورد شیوه استفاده از این سلکتورهای بسیار مفید خصوصیت مطالبی خواهیم آموخت. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید:
سلکتورهای وجودی و مقداری
این سلکتورها امکان انتخاب یک عنصر را بر مبنای وجود یک خصوصیت منفرد (برای نمونه href) یا بر مبنای تطبیق‌های مختلف با مقدار خصوصیت فراهم می‌سازند.
برای توضیح بیشتر به جدول زیر توجه کنید:
| سلکتور | مثال | توضیح |
|---|---|---|
| [attr] | a[title] | با عناصری مطابقت می‌یابد که نام خصوصیت attr را داشته باشند. مقدار آن درون براکت می‌آید. |
| [attr=value] | a[href="https://example.com"] | با عناصری مطابقت می‌آید که دارای نام attr بوده و مقدار آن‌ها دقیقاً برابر با value باشد که رشته درون گیومه است. |
| [attr~=value] | p[class~="special"] | با عناصری تطبیق می‌یابد که نام آن attr و مقدار آن دقیقاً value باشد یا عناصری که دارای خصوصیت class شامل یک یا چند نام کلاس باشد که دست کم یکی از آن‌ها با مقدار value تطبیق پیدا کند.
توجه کنید که در لیست نام چنیدن کلاس، نام کلاس‌ها با فاصله خالی از هم جدا می‌شوند. |
| [attr|=value] | div[lang|="zh"] | با عناصری تطبیق می‌یابد که دارای نام attr و مقدار آن‌ها دقیقاً برابر با value باشد یا بتوانند با value و سپس یک خط تیره آغاز شوند. |
در مثال زیر می‌توانید سلکتورهای مورد استفاده را ببینید:
- با استفاده از li[class] می‌توانیم هر سلکتوری با یک خصوصیت کلاس را تطبیق بدهیم. این گزینه با همه آیتم‌ها به جز آیتم نخست تطبیق می‌یابد.
- li[class="a"] با سلکتوری تطبیق می‌یابد که دارای کلاس a باشد، اما اگر سلکتوری دارای کلاس a و سپس کلاس دیگری که با فاصله جدا شده است باشد، تطبیق نمی‌یابد. بدین ترتیب آیتم دوم لیست را انتخاب می‌کند.
- li[class="a"] با کلاس a تطبیق می‌یابد، اما با مقداری که شامل کلاس a به عنوان بخشی از لیست جدا شده با فاصله خالی باشد، نیز مطابقت پیدا می‌کند.
سلکتورهای تطبیق زیر رشته
این سلکتورها امکان تطبیق پیشرفته زیررشته‌های درون مقدار خصوصیت را می‌دهند. برای نمونه اگر کلاس‌های box-warning و box-error را داشته باشیم و بخواهیم هر چیزی را که با box- آغاز می‌شود تطبیق دهیم می‌توانیم از li[class^="box-"] استفاده کنیم تا هردوی آن‌ها تطبیق پیدا کنند.
| سلکتور | مثال | توضیح |
|---|---|---|
| [attr^=value] | li[class^="box-"] | با عناصری دارای نام خصوصیت attr که مقدار آن‌ها زیررشته value را در ابتدایش داشته باشد، تطبیق می‌یابد. |
| [attr$=value] | li[class$="-box"] | با عناصری تطبیق می‌یابد که نام خصوصیت attr بوده و مقدار آن دارای زیررشته value در انتهایش باشد. |
| [attr*= ] | li[class*="box"] | با عناصری تطبیق می‌یابد که نام خصوصیت attr بوده و مقدار آن شامل دست کم یک رخداد زیررشته value در هر جایی درون خود باشد. |
مثال بعدی کاربرد این سلکتورها را نشان می‌دهد.
- li[class^="a"] با هر مقدار خصوصیت که با a آغاز شود تطبیق پیدا می‌کند که شامل دو آیتم نخست لیست هستند.
- li[class$="a"] با هر مقدار خصوصیت که با a پایان یابد تطبیق می‌یابد که شامل آیتم اول و آخر لیست است.
- li[class*="a"] با هر مقدار خصوصیت که هر جایی درون آن a باشد تطبیق می‌یابد و از این رو با همه آیتم‌های لیست زیر تطبیق خواهد یافت.
حساسیت به کوچکی/بزرگی حروف
اگر می‌خواهید مقادیر خصوصیت‌ها به شیوه‌ای حساس به کوچکی/بزرگی حروف تطبیق پیدا کنند باید از مقدار i پیش از براکت پایانی استفاده کنید. این فلگ به مرورگر اعلام می‌کند که کاراکترهای ASCII را بر اساس کوچکی یا بزرگی تطبیق دهد. بدون استفاده از این فلگ، مقادیر بر اساس حساسیت کوچکی/بزرگی حروف زبان سند تطبیق می‌یابند که در مورد HTML این حساسیت وجود ندارد.
در مثال زیر، سلکتور نخست با مقداری که با a آغاز می‌شود تطبیق می‌یابد و از این رو تنها با آیتم اول لیست مطابقت می‌یابد، زیرا دو مورد دیگر دارای A بزرگ هستند. سلکتور دوم دارای فلگ حساسیت به کوچکی/بزرگی نیست و از این رو با همه آیتم‌های لیست مطابقت می‌یابد.
نکته: یک مقدار جدیدتر به صورت s نیز وجود دارد که حساسیت به کوچکی/بزرگی حروف را در چارچوب‌هایی که به طور معمول حساسیتی وجود ندارد الزام می‌کند، اما این گزینه پشتیبانی محدودی روی مرورگرها دارد و در چارچوب HTML فایده چندانی ندارد.
تمرین عملی
در مثال زنده زیر با استفاده از سلکتورهای خصوصیت، برخی کدهای CSS اضافه کنید که کارهای زیر را انجام دهد:
- عنصر <a> را با خصوصیت title هدف‌گیری و رنگ حاشیه آن را صورتی کنید (border-color: pink).
- عنصر <a> را با خصوصیت href که شامل کلمه contract در هر جایی در مقدار خود است، هدف‌گیری و رنگ حاشیه آن را نارنجی کنید (border-color: orange).
- عنصر <a> را با خصوصیت href که با کلمه https آغاز می‌شود هدف‌گیری و رنگ حاشیه آن را سبز کنید (border-color: green).
نکته: پاسخ تمرین فوق را می‌توانید در این صفحه (+) ملاحظه کنید، اما تلاش کنید ابتدا خودتان آن را مورد بررسی قرار دهید.
سخن پایانی
بدین ترتیب به پایان بخش هشتم از این سری مقالات آموزشی CSS می‌رسیم. اینک شما با سلکتورهای خصوصیت آشنا شده‌اید و می‌توانید در بخش بعدی با سلکتورهای شبه کلاس و شبه عنصر آشنا شوید. برای مطالعه بخش بعدی روی لینک زیر کیک کنید:
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- آموزش طراحی وب با CSS
- مجموعه آموزش های برنامه‌نویسی
- مفاهیم مقدماتی CSS — آموزش CSS (بخش اول)
- نکات ایجاد انیمیشن با CSS و جاوا اسکریپت — به همراه مثال
==
