میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش گزینش عناصر بر اساس ویژگی (Attribute Selectors) در CSS با من همراه باشید.


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

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

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


گزینشگر Attribute

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

[title]
{
color:blue;
}

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

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

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

[title=coderschool]
{
border:5px solid green;
}

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

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

[title~=hello] { color:blue; }

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

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

[lang|=en] { color:blue; }

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;
}

 


امیدواریم آموزش گزینش عناصر بر اساس ویژگی (Attribute Selectors) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
attribute selectors cssAttribute Selectors در csscssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسیگزینش عناصر بر اساس ویژگیگزینش عناصر بر اساس ویژگی در CSS
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟