انتخاب گرهای ویژگی (Attribute Selectors)
«انتخاب گر ویژگی (Attribute Selector)» یعنی انتخاب عنصر با توجه به ویژگی و مقدارش. ویژگی همان خاصیت داخل تگ است؛ مثل href یا type. با این روش، هدف گیری دقیق می شود؛ مثل فیلتر کردن لیست کلاس با برچسب ها.
انتخاب با داشتن ویژگی: [attribute]
هر عنصری که آن ویژگی را دارد، انتخاب می شود. سریع و عمومی است.
a[target] {
background-color: yellow;
}
مقدار دقیق: [attribute="value"]
وقتی مقدار باید دقیقاً همان باشد. مثل انتخاب لینک های پنجره جدید.
a[target="_blank"] {
background-color: yellow;
}
شامل یک کلمه جدا: [attribute~="value"]
برای لیست کلماتِ جدا با فاصله است. فقط خود کلمه را می گیرد.
[title~="flower"] {
border: 5px solid yellow;
}
کلمه یا شروعِ کلمه-خط تیره: [attribute|="value"]
یا دقیقاً همان مقدار است، یا با value- شروع می شود. مثل زبان ها.
[class|="top"] {
background: yellow;
}
شروع با مقدار: [attribute^="value"]
وقتی ابتدای رشته مهم است. مثل کلاس هایی که با top شروع می شوند.
[class^="top"] {
background: yellow;
}
پایان با مقدار: [attribute$="value"]
وقتی انتهای رشته مهم است. مثل کلاس هایی که با test تمام می شوند.
[class$="test"] {
background: yellow;
}
شامل زیررشته: [attribute*="value"]
هر جا value درون مقدار باشد، می گیرد. مثل te داخل test.
[class*="te"] {
background: yellow;
}
استایل دهی فرم ها با انتخاب گر ویژگی
نوع ورودی ها را جدا هدف بگیر. ورودی متن یک استایل، دکمه استایلی دیگر.
input[type="text"] {
width: 150px;
padding: 6px;
margin-bottom: 10px;
background-color: pink;
}
input[type="button"] {
width: 100px;
padding: 6px;
background-color: lightgreen;
}
گام های عملی
- عنصر و ویژگی هدف را مشخص کن.
- انتخاب گر درست را برگزین.
- CSS را کوتاه و خوانا بنویس.
- در مرورگر تست و اصلاح کن.
نکته: برای تمرین بیشتر، به انتخاب گر ویژگی و نمونه های گرافیکی در تصاویر اسپریت و چیدمان کارت ها در گالری تصاویر سر بزن.
جمع بندی سریع
- [attr] یعنی داشتن ویژگی.
- [attr="v"] یعنی مقدار دقیق.
- ^=، $=، *= برای شروع، پایان، شامل است.
- ~= برای کلمه جدا و |= برای value- است.
- برای فرم ها بسیار کاربردی است.