انتخاب‌گرهای خصیصه در CSS

در دنیای طراحی وب، CSS یکی از ابزارهای مهم و کاربردی است که به طراحان وب امکان می‌دهد تا ظاهر صفحات وب را کنترل کنند. یکی از ویژگی‌های قدرتمند CSS، انتخاب‌گرهای خصیصه (Attribute Selectors) است که به شما این امکان را می‌دهد تا استایل خاصی را به عناصر HTML بر اساس خصیصه‌های آنها اعمال کنید. این ویژگی به ویژه زمانی مفید است که بخواهید استایل خاصی برای عناصری اعمال کنید که با خصیصه‌های خاصی مشخص شده‌اند، بدون اینکه به کلاس یا آی‌دی خاصی نیاز داشته باشید.

انتخاب‌گرهای خصیصه انواع مختلفی دارند که هر کدام کاربرد خاصی دارند. برای مثال، می‌توانید عناصری را بر اساس وجود یک خصیصه خاص، مقدار آن خصیصه و یا حتی قسمتی از آن مقدار انتخاب کنید. این انعطاف‌پذیری به شما کمک می‌کند تا به طور دقیق‌تری کنترل روی استایل‌دهی عناصر داشته باشید.

در ادامه، به بررسی چند نوع رایج از انتخاب‌گرهای خصیصه می‌پردازیم. انتخاب‌گرهای پایه‌ای شامل رویکردهای مختلفی مثل [attr] برای انتخاب عناصری که خصیصه‌ای خاص دارند و [attr="value"] برای انتخاب عناصری که خصیصه آنها مقدار خاصی دارد، می‌باشند.

همچنین می‌توانیم از انتخاب‌گرهای شاخه تخصصی تری مانند [attr^="value"] برای انتخاب عناصری که مقدار خصیصه آنها با یک مقدار خاص آغاز می‌شود، [attr*="value"] برای پیدا کردن عناصری که مقدار خصیصه آنها حاوی مقدار خاصی است، و [attr$="value"] برای انتخاب عناصری که مقدار خصیصه آنها به یک مقدار خاص ختم می‌شود، استفاده کنیم.

نمونه کد و استفاده عملی

<style>
  /* انتخاب تمام عناصر با خصیصه title */
  [title] {
    color: blue;
  }

  /* انتخاب عناصر input با نوع text */
  input[type="text"] {
    border: 1px solid #ccc;
  }

  /* انتخاب لینک‌هایی که href آنها با https آغاز می‌شود */
  a[href^="https"] {
    color: green;
  }

  /* انتخاب لینک‌هایی که href آنها حاوی example است */
  a[href*="example"] {
    font-weight: bold;
  }

  /* انتخاب تصاویر با فرمت png */
  img[src$=".png"] {
    border: 2px solid red;
  }
</style>
<input type="text" title="Sample Input"/>
<a href="https://www.example.com">Example Link</a>
<img src="image.png" alt="PNG Image"/>

شرح خط به خط کد:

[title]
این خط همه عناصر HTML که خصیصه title دارند را انتخاب کرده و رنگ متن آنها را آبی می‌کند.

input[type="text"]
این خط به تمام عناصر input که نوع آنها text است، یک قاب نازک خاکستری اعمال می‌کند.

a[href^="https"]
این خط همه لینک‌ها (تگ‌های a) که خصیصه href آنها با https شروع می‌شود، به رنگ سبز در می‌آورد.

a[href*="example"]
این خط به لینک‌هایی که در خصیصه href آنها کلمه example وجود دارد، ضخامت فونت بیشتری می‌دهد.

img[src$=".png"]
این خط همه تصاویر با فرمت png را انتخاب کرده و مرزی قرمز به دور آنها می‌کشد.