فیلتر پیشرفته: انتخاب عناصر بر اساس ویژگی‌هایشان

انتخاب‌گرهای صفت: استایل دادن بر اساس ویژگی‌ها! 🧰

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

چرا انتخاب‌گر صفت؟ 🤔

گاهی وقت‌ها ما نیاز داریم که عناصری رو استایل بدیم که یه صفت خاص دارن، یا یه صفت با یه مقدار مشخص. مثلاً:

• همه لینک‌هایی که به یه صفحه خارجی (`target=”_blank”`) اشاره می‌کنن.
• فیلدهای ورودی که از نوع `required` هستن.
• عناصر `img` که صفت `alt` ندارن (برای دسترسی‌پذیری).
• همه دکمه‌هایی که صفت `disabled` دارن.

اینجاست که انتخاب‌گرهای صفت به دادمون می‌رسن!

انواع انتخاب‌گرهای صفت: 🛠️

چندین روش برای انتخاب بر اساس صفات وجود داره:

1. [attribute]: انتخاب عنصری که صفت مورد نظر رو داره (مقدارش مهم نیست).
   
   مثال: انتخاب تمام تگ‌های `img` که صفت `alt` دارن.

   
   img[alt] { /* هر img که صفت alt داشته باشه */
     border: 2px solid red; /* یه حاشیه قرمز براش بذار */
   }
           

2. [attribute=”value”]: انتخاب عنصری که صفت مورد نظر رو با مقدار دقیق داره.
   
   مثال: انتخاب تمام لینک‌هایی که `target` اونها دقیقاً برابر با `_blank` هست.

   
   a[target="_blank"] { /* هر a که target دقیقاً برابر "_blank" باشه */
     background-image: url('external-link-icon.png'); /* یه آیکن برای لینک خارجی */
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 15px;
   }
           

3. [attribute~=”value”]: انتخاب عنصری که صفت مورد نظر، لیستی از مقادیر جدا شده با فاصله رو داره و یکی از اون مقادیر دقیقاً برابر با `value` هست. (برای صفاتی مثل `class` که می‌تونن چند مقدار داشته باشن)
   
   مثال: انتخاب تمام عناصری که صفت `class` اونها شامل کلمه `important` هست.

   
   [class~="important"] { /* هر عنصری که کلاس هاش شامل "important" باشه */
     font-weight: bold;
     color: orange;
   }
           

   *این انتخاب‌گر شبیه به انتخاب‌گر کلاس (`.important`) عمل می‌کنه، ولی روی هر صفتی می‌تونه اعمال بشه.*

4. [attribute|=”value”]: انتخاب عنصری که صفت مورد نظر یا با مقدار دقیق `value` شروع می‌شه، یا با `value` و بعدش یه خط تیره (`-`) و سپس مقادیر دیگه. (معمولاً برای زبان‌ها استفاده می‌شه، مثل `lang=”en”` یا `lang=”en-US”`)
   
   مثال: انتخاب تمام عناصری که زبان اونها انگلیسی هست (چه `en` و چه `en-US`, `en-GB` و…).

   
   [lang|="en"] { /* هر عنصری که صفت lang با "en-" شروع بشه یا دقیقاً "en" باشه */
     font-style: italic; /* متن انگلیسی ایتالیک بشه */
   }
           

5. [attribute^=”value”]: انتخاب عنصری که مقدار صفتش با `value` شروع می‌شه.
   
   مثال: انتخاب تمام لینک‌هایی که آدرسشون با `https` شروع می‌شه.

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

6. [attribute$=”value”]: انتخاب عنصری که مقدار صفتش با `value` تموم می‌شه.
   
   مثال: انتخاب تمام لینک‌هایی که به فایل‌های `pdf` ختم می‌شن.

   
   a[href$=".pdf"] { /* هر a که href با ".pdf" تمام بشه */
     background-image: url('pdf-icon.png'); /* آیکن PDF اضافه کن */
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
   }
           

7. [attribute*=”value”]: انتخاب عنصری که مقدار صفتش شامل `value` در هر جایی باشه (حتی وسط).
   
   مثال: انتخاب تمام ورودی‌هایی که `name` اونها شامل `user` هست.

   
   input[name*="user"] { /* هر input که name شامل "user" باشه */
     border-color: purple; /* حاشیه بنفش */
   }
           

این انتخاب‌گرها خیلی قدرتمند هستن! می‌تونین ترکیبی از اونها رو با انتخاب‌گرهای دیگه (مثل کلاس یا آیدی) استفاده کنین تا به دقت فوق‌العاده‌ای در انتخاب عناصر برسید.

انتخاب‌گرهای صفت، ابزارهای کلیدی برای ساخت صفحات وب پویا و واکنش‌گرا هستن. با تمرین و خلاقیت، می‌تونین از قدرت کامل اونها استفاده کنین! موفق باشین! 🌟