گزینش عناصر بر اساس ویژگی

چاپ

style دادن به عناصر HTMLی که یک صفت (Attribute) خاص دارند

Wiki

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

توجه: IE7 و IE8 مورد بالا را تنها در صورتی که یک DOCTYPE! در بالای صفحه اعلان شده باشد، پشتیبانی می کنند. در IE6 و نسخه های پایین تر گزینشگر attribute پشتیبانی نمی شود.


گزینشگر Attribute

Wiki

در مثال زیر، رنگ متن تمام عناصر با صفت title آبی خواهد شد:

مثال (گزینش عناصر بر اساس ویژگی)

[title]
{
color:blue;
}
خودتان امتحان کنید »

گزینشگر و مقدار یک Attribute

Wiki

در مثال زیر، تمام عناصری که صفت title آنها با مقدار "beyamooz" تنظیم شده است، styleدهی شده:

مثال (گزینش عناصر بر اساس ویژگی)

[title=beyamooz]
{
border:5px solid green;
}
خودتان امتحان کنید »

در مثال زیر، رنگ متن همه عناصری که صفت title آنها شامل کلمه "hello" باشد، آبی خواهد شد:

مثال (گزینش عناصر بر اساس ویژگی)

[title~=hello] { color:blue; }
خودتان امتحان کنید »

در مثال زیر، رنگ متن همه عناصری که صفت lang آنها شامل کلمه "en" یا "-en" باشد، آبی خواهد شد:

مثال (گزینش عناصر بر اساس ویژگی)

[lang|=en] { color:blue; }
خودتان امتحان کنید »

Style دادن عناصر input

Wiki

گزینشگر 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;
}
خودتان امتحان کنید »