گزینش عناصر بر اساس ویژگی
style دادن به عناصر HTMLی که یک صفت (Attribute) خاص دارند
علاوه بر اینکه عناصر HTML را می توان بر اساس id یا classشان style داد، این امکان نیز وجود دارد که آنها را بر اساس یک attribute خاص قالب بندی کرد.
توجه: IE7 و IE8 مورد بالا را تنها در صورتی که یک DOCTYPE! در بالای صفحه اعلان شده باشد، پشتیبانی می کنند. در IE6 و نسخه های پایین تر گزینشگر attribute پشتیبانی نمی شود.
گزینشگر Attribute
در مثال زیر، رنگ متن تمام عناصر با صفت title آبی خواهد شد:
گزینشگر و مقدار یک Attribute
در مثال زیر، تمام عناصری که صفت title آنها با مقدار "beyamooz" تنظیم شده است، styleدهی شده:
در مثال زیر، رنگ متن همه عناصری که صفت title آنها شامل کلمه "hello" باشد، آبی خواهد شد:
در مثال زیر، رنگ متن همه عناصری که صفت lang آنها شامل کلمه "en" یا "-en" باشد، آبی خواهد شد:
Style دادن عناصر input
گزینشگر Attribute به طور خاص برای style دادن به فرم هایی که کلاس یا ID ندارند مفیداند:
مثال (گزینش عناصر بر اساس ویژگی)
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
خودتان امتحان کنید »{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 18583
دیدگاه‌ها
سلام .
میخواستم بپرسم در این قسمت
[title~=hello] { color:blue; }
علامت ~ به چه علت قرار گرفته ؟ چون تو مثال های قبلی برای انتخاب صفت ها از ~ استفاده نشده بود .
با تشکر از سایت خوبتون .
سلام .
لطفا این مقاله را مطالعه کنید:
beyamooz.com/forum/threads/161-%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D8%A7%DB%8C%D9%86-%D8%AF%D9%88-%D8%B3%D9%84%DA%A9%D8%AA%D9%88%D8%B1-%D8%AF%D8%B1-%DA%86%DB%8C%D8%B3%D8%AA%D8%9F-attribute*-value-%D9%88-attribute-value
سلام و خسته نباشد
چرا از این style هایی که بهattribute اختصاص داده میشود استفاده میکنید.
ممنون
با سلام
استفاده از استایل ها در حالت کلی برای ایجاد تغییرات دلخواه بر روی شکل ظاهری عنصر مورد نظر استفاده می شود.