سلکتور ویژگی در CSS
تا اینجا با نام تگ، class، id و نسبت‌های درختی عنصر را پیدا می‌کردید. گاهی خود HTML از قبل حقیقت را گفته: این لینک target دارد، آن ورودی type="email" است، آدرس با https شروع می‌شود. سلکتور attribute همان حقیقت را می‌خواند — بدون اینکه برای هر حالت یک class تازه بسازید.
سلکتور attribute چیست؟
سلکتور attribute عناصری را پیدا می‌کند که یک ویژگی HTML مشخص دارند. می‌توانید فقط «وجود» را چک کنید، یا مقدار را دقیق/نیمه‌دقیق بسنجید. نام ویژگی داخل براکت مربع می‌آید: [attr].
پنج الگوی روزمره
با این‌ها تقریباً همهٔ کارهای معمولی attribute را پوشش می‌دهید.
📊 عملگرهای سلکتور attribute
| الگو | معنی ساده | مثال |
|---|---|---|
[attr] |
این ویژگی هست (هر مقداری) | a[target] |
[attr="value"] |
مقدار دقیقاً همین است | input[type="email"] |
[attr^="value"] |
مقدار با این متن شروع می‌شود | a[href^="https"] |
[attr$="value"] |
مقدار با این متن تمام می‌شود | a[href$=".pdf"] |
[attr*="value"] |
این متن جایی داخل مقدار هست | a[href*="docs"] |
فقط وجود ویژگی — [attr]
وقتی فقط نام را داخل براکت می‌گذارید، یعنی «این attribute را داشته باشد.» مقدارش هرچه باشد مهم نیست.
وجود — لینک‌هایی که تب جدید باز می‌کنند
cssa[target] {
font-weight: 600;
}کجا به درد می‌خورد؟
پرچم‌های اختیاری در HTML: لینک با target، یا عنصری که data-state دارد — حتی اگر هنوز مقدارش را فیلتر نکنید.
مقدار دقیق — [attr="value"]
علامت = می‌گوید مقدار باید مو به مو همان باشد. دور مقدار معمولاً نقل‌قول بگذارید؛ خواناتر و امن‌تر است.
مقدار دقیق — فیلد ایمیل
cssinput[type="email"] {
border: 1px solid #0f766e;
}class بسازیم یا از type استفاده کنیم؟
اگر HTML از قبل type="email" دارد، همان را در سلکتور بنویسید. class تازه (مثل .email-field) وقتی لازم است که همان ظاهر را روی چیزی بدون آن attribute هم بخواهید.
شروع مقدار — ^=
^= یعنی مقدار attribute با این متن شروع شود. برای آدرس‌های امن یا پیشوند مشترک خیلی کاربردی است.
شروع با — لینک‌های https
cssa[href^="https"] {
color: #0f766e;
}پایان مقدار — $=
$= یعنی مقدار با این متن تمام شود. برای پسوند فایل در href یا src عالی است.
پایان با — لینک PDF
cssa[href$=".pdf"] {
font-style: italic;
}جایی در مقدار — *=
*= می‌گوید این متن هر جای مقدار ظاهر شود. قوی است، ولی زود دست‌ودلباز می‌شود. اگر اول یا آخر بودن را می‌دانید، ^= یا $= معمولاً تمیزتر است.
شامل بودن — مسیر docs در آدرس
cssa[href*="docs"] {
text-decoration: underline;
}عادت‌های خوب
- مقدار را در سلکتور داخل نقل‌قول بنویسید:
type="email" - اگر صفحه شلوغ است، نام تگ را هم بگذارید:
input[type="search"]از[type="search"]لخت خواناتر است - املا و حروف بزرگ/کوچک را مثل HTML بنویسید
- هر class را با attribute عوض نکنید؛ وقتی خود markup همان حقیقت را دارد سراغ attribute بروید
خودتان امتحان کنید
- سه لینک بسازید: یکی
https://…، یکی با پایان.pdf، یکی باdocsدر مسیر؛ به‌علاوه یک<input type="email">و یک<input type="text">. a[href^="https"] { color: #0f766e; }را بگذارید — فقط لینک امن رنگ عوض کند.a[href$=".pdf"] { font-style: italic; }— لینک PDF کج شود.input[type="email"] { border-color: #0f766e; }— فقط فیلد ایمیل حاشیه بگیرد.- اختیاری:
a[href*="docs"]را هم ببینید؛ ممکن است از پیشوند/پسوند سخت‌گیرانه لینک‌های بیشتری بگیرد.
اشتباهات رایج
[type=email]بدون نقل‌قول وقتی نقل‌قول واضح‌تر و امن‌تر است*=به‌جای^=— «شامل» وسط را هم می‌گیرد و لینک‌های اضافه روشن می‌شوند- برای ظاهر معمولی به‌جای
.nameاز[class]استفاده کردن - فراموش کردن که
=کل مقدار را می‌خواهد —type="text"باtype="textbox"یکی نیست - قاطی کردن نام ویژگی‌ها —
hreflangغیر ازhrefاست
خلاصه
- سلکتور attribute با
[ ]روی ویژگی‌های HTML کار می‌کند - فقط نام = وجود؛
== مقدار دقیق ^=شروع،$=پایان،*=هر جا داخل مقدار- تنگ‌ترین عملگری را بزنید که هنوز منظورتان را بگوید
- در صورت نیاز نام تگ را هم به سلکتور بچسبانید
- روی
hrefوtypeواقعی تمرین کنید و صفحه را تازه کنید
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود