آموزش CSS – سلکتور Attribute

  • آپدیت شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با ویژگی opacity در CSS آشنا شدید. در این بخش قصد داریم شما را با سلکتور Attribute در CSS آشنا کنیم.

یک سلکتور Attribute المان HTMLی را انتخاب می کند که یک خصوصیت یا خصوصیتی با مقدار خاص را دارد.

درک سلکتور Attribute

سلکتور Attribute در CSS یک راه ساده و قدرتمند را برای لحاظ کردن استایل ها به المان HTML را می دهد.

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

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

این ساده ترین فرم از استفاده سلکتور Attribute برای لحاظ کردن استایل ها به المانی که مشخصه مورد نظر را دارد, است.

برای مثال, شما می توانید همه المان ها که خصوصیت title را دارند به اینصورت استایل دهی کنید.

سلکتور [title] در مثال بالا همه المان ها که خصوصیت title را دارند انتخاب می کند.

همچنین می توانید انتخاب خود را به المان HTML که این نوع خصوصیت را دارد محدود کنید.

سلکتور abbr[title] فقط المان های <abbr> که خصوصیت title را دارند انتخاب می کند.

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

شما می توانید از اپراتور = برای سلکتور attribute به منظور انتخاب المان هایی که مقدار خصوصیت آنها دقیقا مساوی با مقدار داده شده است, استفاده کنید:

این سلکتور همه <input> ها که مقدار type آنها برابر submit است را انتخاب می کند.

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

شما می توانید از اپراتور ~= برای ساختن یک سلکتور attribute که هر نوع المانی که مقدار خصوصیت آن یک لیست جدا شونده با فاصله دارد (مثل class=”alert warning”) استفاده کنید که دقیقا همان مقدار مشخص شده را دارند.

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

برای مثال این المان می تواند شامل مقادیر کلاس مثل warning یا alert warning info و .. باشد.

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

شما می توانید از اپراتور |= برای ساخت سلکتور attribute که هر نوع المان مقدار خصوصیت آن یک لیست جدا شوند با – دارند و مقدار مشخص شده نیز در اول باشد, استفاده کنید.

سلکتور استفاده شده در مثال بالا همه المان ها که خصوصیت lang آنها شامل مقدار شروع شونده en باشد و همچنین می تواند بعد آن یک – و بعد آن کاراکترهای دیگر باشد, انتخاب می کند.

این دستور المان هایی با خصوصیت lang و مقدار en , en-US, en-GB را انتخاب می کند و مقادیر US-en, GB-en نادیده گرفته می شوند.

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

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

این سلکتور در مثال بالا به همه لینک های خارجی یک آیکون اضافه می کند.

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

مشابه سلکتور بالا, شما می توانید از اپراتور $= برای ساخت سلکتور attribute که هر نوع المان مقدار خصوصیت آن با مقدار مشخص شده به اتمام می رسد استفاده کنید.

در مثال بالا همه المان های <a> که یک لینک به سند PDF دارند را انتخاب و یک آیکون را به آن اضافه می کند.

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

شما می توانید از اپراتور *= برای انتخاب همه المان هایی که خصوصیت مشخصی را بدون توجه به اینکه اول و یا آخر آن کاراکتری وجود دارد یا خیر و یا اینکه تنها مقدار خصوصیت باشد یا نه, استفاده کنید.

این سلکتور attribute در مثال بالا همه المان های html که خصوصیت شامل warning را دارند انتخاب می کند.

برای مثال همه المان ها که مقدار کلاس warning, alert warning, alert-warning یا alert_warning را انتخاب می کند

استایل دهی فرم ها با سلکتور attribute در css

سلکتورهای attribute برای استایل دهی فرم ها بدون کلاس یا id بسیار مفید هستند.

 

امیدوارم در این بخش آموزش CSS, از سلکتور Attribute در CSS نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link