سلکتور های صفات در CSS

استایل دهی به عناصر HTML با صفات بخصوص

استایل دهی به عناصری با صفت یا مقدار بخصوص با استفاده از CSS امکان پذیر است.
 

سلکتور [attribute]

این سلکتور برای انتخاب عناصری با صفتی بخصوص  استفاده می شود. در مثال زیر ، تمام عناصر <a> با صفت target انتخاب می شوند.

مثال :

a[target] {
    background-color: yellow;
}

سلکتور [attribute="value"]

از این سلکتور برای انتخاب عناصری با صفت مشخص و مقدار بخصوص استفاده می شود. در مثال زیر تمام عناصر <a> با صفت target="_blank" انتخاب می شوند.

مثال :

a[target="_blank"] {
    background-color: yellow;
}

سلکتور [attribute~="value"]

این سلکتور برای انتخاب عناصری که در مقدار صفت مشخصی از آنها کلمه بخصوصی وجود دارد ، استفاده می شود.

در مثال زیر تمام عناصری که دارای صفت title می باشند و شامل کلماتی می شوند که با فاصله از هم جدا شده اند و یکی از آنها flower  باشد ، انتخاب خواهند شد.

نکته ! اگر کلمات بدون فاصله و چسبیده به یک خط تیره مابین آنها باشند ، عنصر مورد نظر انتخاب نخواهد شد.

مثال :

[title~="flower"] {
    border: 5px solid yellow;
}

سلکتور [attribute|="value"]

این سلکتور برای انتخاب عناصری که مقدار صفت بخصوصی از آنها با کلمه بخصوصی شروع شود ، استفاده می شود. یعنی هم صفت را مشخص می کنیم و هم مقدار را.

در مثال زیر تمام عناصری که دارای صفت class می باشند و مقدار کلاس آنها با top شروع می شوند انتخاب خواهند شد.

نکته ! مقدار مورد نظر باید کلمه کامل حتی به تنهایی (مانند : "class="top) یا کلمه ای که با یک خط تیره ادامه پیدا می کند (مانند "class="top-text) باشد.

مثال :

[class|="top"] {
    background: yellow;
}

سلکتور [attribute^="value"]

این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها با کلمه بخصوصی شروع شود ، استفاده می شود. یعنی فقط مقدار را مشخص می کنیم و مقدار مورد نظر در ابتدای مقدار هر صفتی که باشد قابل قبول است.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها با کلمه top شروع می شود ، انتخاب می کند.
نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.

مثال :

[class^="top"] {
    background: yellow;
}

سلکتور [attribute$="value"]

این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها با کلمه بخصوصی پایان می یابد ، استفاده می شود.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها با کلمه top تمام می شود ، انتخاب می کند.

نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.

مثال :

[class$="test"] {
    background: yellow;
}

سلکتور [attribute*="value"]

این سلکتور برای انتخاب عناصری که مقدار صفتی از آنها حاوی کلمه بخصوصی باشد ، استفاده می شود.
مثال زیر تمام عناصری را که دارای کلاس هایی هستند که مقدار آنها حاوی کلمه te باشد ، انتخاب می کند.

نکته ! هیچ ضرورتی ندارد که مقدار مورد نظر ، کلمه کاملی باشد.

مثال :

[class*="te"] {
    background: yellow;
}

استایل دهی به فرم ها

سلکتور های صفات این امکان را فراهم می کند تا بدون استفاده از class یا id ، فرم ها را بر اساس استایل دلخواه تنظیم کنیم.

مثال :

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}