CSS Attribute Selectors
سلکتور ویژگی پایه
“`css
element[attribute] {
/* استایلها */
}
“`
تمام عناصری را انتخاب میکند که دارای آن ویژگی (Attribute) باشند، بدون توجه به مقدار آن.
مثال:
“`css
input[required] {
border: 2px solid red;
}
“`
این کد تمام `<input>`هایی که ویژگی `required` دارند را انتخاب میکند و دور آنها خط قرمز میکشد.
—
سلکتور مقدار دقیق ویژگی
“`css
element[attribute=“value”] {
/* استایلها */
}
“`
عناصری که مقدار ویژگیشان دقیقا برابر با مقدار داده شده باشد را انتخاب میکند.
مثال:
“`css
a[href=“https://example.com”] {
color: green;
}
“`
تمام لینکهایی که آدرس دقیقشان `https://example.com` است، رنگشان سبز میشود.
—
سلکتور کلمه در مقدار ویژگی (با فاصله جدا شده)
“`css
element[attribute~=“value”] {
/* استایلها */
}
“`
عناصری که مقدار ویژگیشان شامل یک کلمه خاص در یک رشته با فاصله باشد را انتخاب میکند.
مثال:
“`css
[class~=“button”] {
background: blue;
}
“`
عنصرهایی که کلاسشان شامل کلمه `button` باشد (مثلاً `class=”btn button active”`).
—
سلکتور مقدار ویژگی شروعشونده با مقدار مشخص
“`css
element[attribute^=“value”] {
/* استایلها */
}
“`
عناصری که مقدار ویژگیشان با مقدار داده شده شروع شود را انتخاب میکند.
مثال:
“`css
a[href^=“https”] {
font-weight: bold;
}
“`
تمام لینکهایی که آدرسشان با `https` شروع شود، متنشان بولد میشود.
—
سلکتور مقدار ویژگی پایانیافته با مقدار مشخص
“`css
element[attribute$=“value”] {
/* استایلها */
}
“`
عناصری که مقدار ویژگیشان با مقدار داده شده تمام شود را انتخاب میکند.
مثال:
“`css
img[src$=“.png”] {
border-radius: 8px;
}
“`
تمام عکسهایی که آدرس منبعشان با `.png` تمام میشود، گوشههایشان گرد میشود.
—
سلکتور مقدار ویژگی شامل زیررشته مشخص
“`css
element[attribute*=“value”] {
/* استایلها */
}
“`
عناصری که مقدار ویژگیشان شامل یک زیررشته خاص در هر جایی باشد را انتخاب میکند.
مثال:
“`css
a[href*=“example”] {
color: orange;
}
“`
تمام لینکهایی که در آدرسشان رشتهی `example` وجود دارد، رنگشان نارنجی میشود.
—
جدول خلاصه
| سلکتور | معنی | مثال |
| —————– | ——————————- | ——————————- |
| `[attr]` | دارای ویژگی | `input[required]` |
| `[attr=”value”]` | مقدار ویژگی برابر با مقدار مشخص | `a[href=”https://example.com”]` |
| `[attr~=”value”]` | شامل کلمه مشخص شده در رشته | `[class~=”button”]` |
| `[attr^=”value”]` | مقدار ویژگی با مقدار شروع شود | `a[href^=”https”]` |
| `[attr$=”value”]` | مقدار ویژگی با مقدار پایان یابد | `img[src$=”.png”]` |
| `[attr*=”value”]` | شامل زیررشته مشخص شده باشد | `a[href*=”example”]` |
دیدگاهتان را بنویسید