CSS attribute selectors ها
یکی از وِیژگی هائی که در CSS 2 اضافه شد و در نسخه سوم نیز گسترش یافت css attribute selector ها هستند ، css attribute selector ها به شما این امکان را میدهند که style های خود را بر اساس مقادیر attribute های تگ های HTML نسبت دهید . فرض کنید میخواهید کد css ی بنویسید که یک آیکون rss به انتهای لینک های اضافه کند که دارای پسوند .rss و باشد ، یا میخواهید به لینک های که مقدار مشخصه title آنها xml است یک آیکون xml اضافه کنید و فونت نوشته را هم تغییر دهید ، کلیه این کارها با استفاده از css attribute selector ها میسر می باشد . در زیر به انواع مختلف استفاده از این ویژگی جالب css خواهیم پرداخت .البته برای تمامی روش های فوق یک روش سنتی هم وجود دارد و آن هم نسبت دادن کلاس خاص به هر المانی است که میخواهیم نوع نمایش خاصی داشته باشد . طبیعتا روش دوم ساده تر و صد البته زمان بر تر و خسته کننده تر از روش اول می باشد .
1- دسترسی به تگ هائی که دارای یک مشخصه هستند:
فرض کنید قرار است یک سری استایل مشخص را برای نمامی تگ هائی که دارای مشخه title هستند نسبت دهیم . کافیست از کد زیر استفاده نمائیم:
[attribue]
{
color:brown;
}
کافیست در کد فوق به جای attribute مقدار title را قرار دهیم . اگر بخواهیم تنها لینک هائی که شامل مشخصه title هستند را هدف قراردهیم می توانیم از کد زیر استفاده کنیم :
a[attribue]
{
color:brown;
}
2 - برای هدف قراردادن تگ هائی که دارای مشخصه خاصی با یک مقدار مشخص هستند می توانیم از کد زیر استفاده نمائیم: [attribue=value]
{
YOUR CSS
}
بطور مثال برای تگ های لینکی که دارای مقدار href=
http://friendfeed.com هستند می توانیم از کد زیر استفاده نمائیم:
a[href=http://friendfeed.com]
{
color:red;
}
3 - برای هدف قراردادن تگ هائی که شامل یک مشخصه خاص هستند که مقدار این مشخصه حاوی یک کلمه خاص هست:
بطور مثال برای هدف قراردادن تمامی لینک هائی که در مشخه title آن از کلمه web استفاده شده است می توانیم از کد زیر استفاده نمائیم:
a[title~=web]
{
color:red;
}
توجه داشته باشید که در روش فوق کاراکتر Space جداکننده کلمات از همدیگر می باشد.
در صورتیکه بخواهیم - جداکننده محسوب شود به جای =~ از =| استفاده میکنیم.4 - برای هدف قراردادن تگ هائی که شامل یک مشخصه خاص هستند که مقدار این مشخصه بک یک عبارت خاص ختم می شود :
به طور مثال با استفاده از کد زیر می توانیم یک آیکون در انتهای لینک های مربوط به فایل های با پسوند mov قرار دهیم .
a[href$='.mov']
{
padding-right: 17px;
background: url(icons/video.png) no-repeat right;
}
5 - برای هدف قراردان تگ هائی که شامل یک مشخصه خاص هستند که مقدار این مشخصه با یک عبارت خاص شروع می شود:اگر بخواهیم سناریو فوق را برای لینک هائی که با mailto شروع می شوند پیاده سازی کنیم ، میتوانیم از کد زیر استفاده نمائیم:
a[href ^="mailto:"]
{
padding-right: 18px;
background: url(icons/email.png) no-repeat right;
}
6 - برای هدف قراردادن تگ هائی که شامل یک مشخصه خاص هستند که مقدار این مشخصه دارای یک عبارت می باشد:
فرض کنید من دوست داشته باشم بقل هر لینکی که href ان حاوی mehdivk هست یک آیکون asp.net قرار دهم ، می توانم از این کد استفاده کنم:
a[href *="mehdivk"]
{
padding-right: 17px;
background: url(icons/aspdotnet.png) no-repeat right;
}
منابع:
1 -
CSS 3 attribute selectors (بخش توسعه دهندگان مرورگر اپرا)