آموزش سلکتور خصوصیت یا Attribute در CSS

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

این امکان وجود دارد که عناصری از HTML که خصوصیت های خاصی دارند یا مقادیر خصوصیت خاصی دارند را در CSS استایل دهی کنیم.

سلکتور [attribute] در CSS

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

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

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

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

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

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

از سلکتور [attribute~="value"] برای انتخاب عناصری که از یک خصوصیت استفاده می کنند که مقدار آن، حاوی یک کلمه ی خاص است، استفاده می شود. در مثال زیر، تمام عناصری که یک خصوصیت title دارند، و  حاوی یک لیست از کلمات جدا شده با space هستند و یکی از آن کلمات flower است، انتخاب می شوند:

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

 مثال بالا، عناصری با title="flower" یا title="summer flower" یا title="flower new" را مورد تطابق قرار می دهد، اما title="my-flower" و title="flowers" را مورد تطابق قرار نمی دهد.

 بررسی سلکتور [attribute|="value"] در CSS

از سلکتور  [attribute|="value"] برای انتخاب عناصر با یک خصوصیت مشخص استفاده می شود، به طوری که مقدار آن خصوصیت می تواند دقیقاً برابر با value باشد یا پس از value یک خط تیره بوده و پس از آن هر مقدار دیگری باشد.

نکته: value باید یک کلمه ی کامل باشد؛ یا باید تنها باشد، مانند class="top" یا پس از آن یک خط تیره(-) مانند class="top-text" باشد.

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

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

از سلکتور [attribute^="value"] برای انتخاب عناصر با یک خصوصیت مشخص استفاده می شود که مقدار(value) آن با یک مقدار مشخص شروع می شود. در مثال زیر، تمام عناصری که یک خصوصیت class دارند که با "top" شروع می شود، را انتخاب می کنیم:

نکته: حتماً لازم نیست که مقدار مورد نظر یک کلمه ی کامل باشد.

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

بررسی سلکتور [attribute$="value"] در CSS

از سلکتور [attribute$="value"] برای انتخاب عناصری که مقدار خصوصیت آنها با یک مقدار خاص پایان می یابد، استفاده می شود. مثال زیر، تمام عناصری که یک خصوصیت class دارند که مقدار آن با "test" پایان می یابد، را انتخاب می کند:

نکته: مقدار مورد نظر، حتما نباید یک کلمه ی کامل باشد.

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

بررسی سلکتور [attribute*="value"] در CSS

از سلکتور [attribute*="value"] برای انتخاب عناصری که مقدار خصوصیت آنها حاوی یک مقدار خاص است، استفاده می شود. در مثال زیر، تمام عناصر با خصوصیت class که مقدار آن حاوی "te" است را انتخاب می کنیم:

نکته: حتماً لازم نیست این مقدار یک کلمه ی کامل باشد.

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

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

با استفاده از سلکتورهای خصوصیت، می توانیم فرم ها را بدون کلاس(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;
}

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