منظور از انتخابگر attr چیست؟ چگونه از Attr استفاده کنیم؟ چگونه خاصیت های HTML را استایل دهی کنیم؟
این انتخابگر، ساده ترین انتخابگر صفت از انتخابگر هایی هست که تو این فصل یعنی انتخابگر صفات از آموزش طراحی سایت یادشون میگیریم.
نحوه نوشتار
نحوه نوشتار یا سینتکس این انتخابگر به فرم زیر هست:
کاربرد انتخابگر
کاربرد انتخابگر مورد نظر، به شکل مختصر، تو این جمله خلاصه میشه: این انتخابگر، عناصری رو انتخاب میکنه که دارای صفت داخل براکت هستن.
یعنی چی؟
فرض کنین ما دارای قطعه کد CSS زیر هستیم:
a[href]{ color: red; }
وظیفه ی این قطعه کد، اینه که عناصر a دارای صفت href رو به رنگ قرمز دربیاره.
عناصر a فاقد صفت href، تحت تاثیر این قطعه کد CSS نخواهند بود.
مثال ها
مثال اول
به قطعه کد HTML زیر توجه کنین:
<a href="mizfa.com">Mizfa website</a> <a href="w3shcool.com">w3school website</a> <a>Google</a>
حالا با کمک قظعه کد CSS زیر، عنصر های a دارای صفت href رو انتخاب میکنیم و به رنگ قرمز درمیاریم:
a[href]{ color:red; margin:20px; }
نتیجه کد رو به شکل زیر مشاهده میکنیم:
حالا یک صفت دیگه رو بررسی کنیم.
مثال دوم
اینجا از عناصر img استفاده میکنیم که دو تا از اون ها دارای صفت alt و یکیشون فاقد صفت مذکور هستن.
به کد های HTML و CSS زیر دقت کنین:
<img src="sunset.jpg"> <img src="sea.jpg" alt="It is the sea"> <img src="ancient.jpg" alt="a beautiful ancient structure">
img{ margin:40px; width:500px; height:300px; } img[alt]{ box-shadow: 0px 5px 7px blue; }
نتیجه کد رو به شکل زیر میتونیم ببینیم:
اگه جایی از مفاهیم براتون چندان روشن نبود، حتما تو قسمت نظرات بپرسین، ما یاریتون میکنیم 🙂
مثال سوم
ممکنه برامون سوال پیش بیاد، که آیا میتونیم از صفت style مورد استفاده برای استایل دهی داخلی، استفاده کنیم؟ پاسخ مثبته!
به کد های HTML و CSS زیر توجه کنین:
<div></div> <div></div> <div style="width:300px; height:300px;"></div> <div></div>
div{ width:200px; height:200px; margin:40px; background-color: lightgreen; display: inline-block; } div[style]{ background-color: lightseagreen; }
و نتیجه کد رو به شکل زیر مشاهده میکنیم:
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
به کد HTML زیر توجه کنین:
<div class="div1"></div> <div id="div1"></div>
برای انتخاب اولین عنصر div، چه کد CSSای میتونیم بنویسیم؟
از مطالب این مقاله برای پاسخ دادن استفاده کنین.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبتنام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله آموزش CSS ، با انتخابگر صفات [attr] در CSS آشنا شدیم.
وظیفه این انتخابگر، انتخاب کردن عناصر با توجه به وجود یا عدم وجود یک صفت خاص در عنصر مورد نظر بود.
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
2 پاسخ
div[class]{
background-color: lightseagreen;
}
مرسی مهدی 🙂 این پاسخ هم کاملا درسته