سلکتورهای Attribute در CSS

CSS Attribute Selectors

0 341

سلکتورهای Attribute

در چندین جلسه ی قبل، هنگام صحبت در رابطه با selector های مختلف در زبان CSS، بحث سکلتور های attribute به میان آمد و آنجا به شما گفتیم که به علت طولانی بودن بحث این نوع سلکتور ها آن ها را در قسمت جداگانه ای توضیح خواهیم داد. امروز می خواهیم در رابطه با این نوع سلکتور ها صحبت کنیم. ما در زبان HTML می توانیم عناصر را بر اساس attribute هایی که دارند استایل دهی کنیم. برای این کار از سکلتور [attribute] استفاده می کنیم و به جای attribute باید attribute واقعی اش را قرار دهیم. مثال زیر تمام تگ های <a> را هدف قرار داده ایم که attribute ای به نام target داشته باشند:

مشاهده ی خروجی در JSBin

هشدار: برای آنکه این سلکتور در مرورگر Internet Explorer 8 و نسخه های قبل تر آن کار کند باید یک DOCTYPE خاص مشخص شده باشد.

بر اساس مقدار “attribute=”value

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

مشاهده ی خروجی در JSBin

استفاده از حالت “attribute~=”value

یکی دیگر از حالات این دستور، ["attribute~="value] است. این دستور برای مواقعی خوب است که می خواهید مقدارِ attribute شامل کلمه ی خاصی باشد. به طور مثال در کد زیر گفته ایم تمام عناصری را پیدا کن که title آن ها شامل چندین کلمه باشد که با اسپیس از هم جدا شده اند و یکی از آن کلمات هم flower (به معنی «گُل») باشد:

مشاهده ی خروجی در JSBin

استفاده از حالت “attribute|=”value

حالت ["attribute|="value] برای مواقعی خوب است که می خواهید مقدارِ attribute با کلمه ای خاص شروع شود. مثال زیر تمام عناصری را انتخاب می کند که مقدارِ attribute آن با “top” شروع شود:

مشاهده ی خروجی در JSBin

نکته: مقدار این attribute در این دستور باید یک کلمه ی کامل باشد (نه کاراکتر)؛ حالا چه تنها مانند "class="top و چه جدا شده با خط تیره مانند "class="top-text. بنابراین topper دیگر محسوب نمی شود.

تفاوت این حالت با حالت قبلی در این است که در دستور قبلی نیازی نبود که مقدار Attribute با چیزی شروع شود، بلکه باید تنها شامل کلمه ی مورد نظر ما می شد اما در این دستور باید حتما با آن شروع شود.

استفاده از حالت “attribute^=”value

دستور ["attribute^="value] دقیقا مانند دستور قبلی است با این تفاوت که در این دستور نیازی نیست مقدارِ attribute یک کلمه ی کامل باشد. به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

استفاده از حالت “attribute$=”value

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

مشاهده ی خروجی در JSBin

نکته: در این دستور نیازی نیست که مقدار attribute حتما کلمه ای کامل باشد، بلکه می تواند توالی خاصی از کاراکتر ها نیز باشد.

استفاده از حالت “attribute*=”value

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

مشاهده ی خروجی در JSBin

مورد استفاده

یکی از استفاده های این نوع سلکتور، استایل دهی فرم هایی است که class یا id خاصی ندارند:

مشاهده ی خروجی در JSBin

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

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد CSS به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle