جلسه ۵۹ – انتخابگر صفت [attr] در CSS

منظور از attr در انتخابگر ها چیست؟

آشنایی با انتخابگر صفت
آشنایی با انتخابگر صفت

منظور از انتخابگر 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;
}

و نتیجه کد رو به شکل زیر مشاهده می‌کنیم:

استفاده از صفت style در انتخابگر صفات

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

به کد HTML زیر توجه کنین:

<div class="div1"></div>
<div id="div1"></div>

برای انتخاب اولین عنصر div، چه کد CSSای می‌تونیم بنویسیم؟

از مطالب این مقاله برای پاسخ دادن استفاده کنین.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

در این مقاله آموزش CSS ، با انتخابگر صفات [attr] در CSS آشنا شدیم.

وظیفه این انتخابگر، انتخاب کردن عناصر با توجه به وجود یا عدم وجود یک صفت خاص در عنصر مورد نظر بود.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

2 نظر

2 پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=