جلسه ۶۰ – انتخابگر صفت [“attr=”value]

انتخابگر صفت با مقدار در CSS

انتخابگر صفت attr = value
انتخابگر صفت attr = value

چگونه بر اساس مقدار یک صفت را تغییر دهیم؟

دومین انتخابگر مورد بررسی تو این فصل، انتخابگر [“attr=”value] هست.

نحوه نوشتار

نحوه نوشتار و سینتکس دستور این جلسه، به فرم زیره:

نحوه نوشتار

کاربرد انتخابگر

می‌تونیم تو یه توضیح مختصر برای کاربرد انتخابگر مذکور، بگیم که: این انتخابگر عنصری رو انتخاب می‌کنه که صفت مربوط به اون، دارای مقدار مورد نظر باشه.

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

img[src="car.png"]{
   width: 200px;
   height: 200px;
}

توسط کد CSS بالا، می‌تونیم عکس هایی که تو صفت src خودشون، مقدار car.png رو دارن انتخاب کنیم.

به عبارتی، می‌تونیم هر جا عکس ماشین تو صفحه داریم رو به ابعاد ۲۰۰ در ۲۰۰ پیکسل در بیاریم.

مثال ها

مثال اول
این مثال، همون مثالی هست که تو قسمت کاربرد انتخابگر با هم بررسی کردیم. فرض کنیم چندین عکس داریم و می‌خوایم فقط عکس هایی که اسمشون car.jpg هست رو انتخاب کنیم.

کد HTML ما به شکل زیر هست:

<img src="car.jpg">
<img src="north.jpg">
<img src="sea.jpg">
<img src="car.jpg">
<img src="mosque.jpg">

کد CSS رو به شکل زیر خواهیم نوشت:

img{
   width:300px;
   height:200px;
   display: inline-block;
}
img[src="car.jpg"]{
   width:500px;
   height:300px;
}

تو قطعه کد CSS اول، عرض و ارتفاع تمام عکس ها رو ۳۰۰ در ۲۰۰ پیکسل تعریف کردیم، اما با توجه به قطعه کد CSS دوم، عرض و ارتفاع عکس هایی که نام car.jpg بر اون ها هست رو ۵۰۰ در ۳۰۰ پیکسل تعریف می‌کنیم.

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

انتخاب عکس های ماشین با استفاده از انتخابگر صفات

مثال دوم
این مثال، مثال خیلی مهمی هست و بهتون قول می‌دم که تو آینده قراره ازش خیلی استفاده کنین!

اینجا سعی می‌کنیم که استایل عنصر های input مختلف رو تغییر بدیم.

کد HTML زیر رو داریم:

<input type="text" placeholder="Type something">
<input type="submit">

حالا برای تغییر استایل هر کدوم، کافیه از انتخابگر صفت [“attr=”value] استفاده کنیم.

به کد CSS زیر دقت کنین:

input{
   margin:30px;
}
input[type="text"]{
   border:none;
   padding:20px;
   border-radius: 50px;
   background-color: lightgreen;
}
input[type="text"]::placeholder{
   color:white;
}
input[type="submit"]{
   border:none;
   background-color: lightgreen;
   color:white;
   padding:20px;
   border-left: 2px solid orange;
}
input[type="text"]:focus , input[type="submit"]{
   outline: none;
   color:white;
}

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

استایل دهی عناصر input با استفاده از انتخابگر صفات

نکته: تو این مثال از شبه عنصر placeholder:: هم استفاده کردیم که کاربردش، انتخاب کردن متن صفت placeholder هست. توسط این دستور، می‌تونیم استایل placeholder های عناصر input رو تغییر بدیم.

اگه جایی از مقاله براتون سوال و یا ابهامی پیش اومد، حتما و حتما تو قسمت نظرات بپرسین. ما پاسخگو هستیم 🙂

مثال سوم
تو این مثال از اموزش طراحی سایت ، سه لینک رو با هم بررسی می‌کنیم که تمامی اون ها دارای صفت target هستن، اما با مقادیر متفاوت. با کمک همین موضوع، اون دو لینک رو انتخاب می کنیم.

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

<a href="mizfa.com" target="_blank">Mizfa website</a>
<a href="w3shcool.com" target="_blank">w3school website</a>
<a href="google.com" target="_parent">Google</a>

حالا با کمک تفاوت بین لینک آخر و دو لینک اول، لینک اول و دوم رو انتخاب می‌کنیم.

a{
   text-decoration:none;
   color:black;
}
a[target="_blank"]{
   color:red; 
   margin:20px; 
}

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

استایل دهی لینک ها با استفاده از انتخابگر صفات

پایان ترم

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

سوال:

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

<form action="safeLogin.php" method="post">
   <input type="email" name="email">
   <input type="password" name="password">
   <input type="submit">
</form>

<form action="login.php" method="get">
   <input type="email" name="email">
   <input type="password" name="password">
   <input type="submit">
</form>

بنا به دلایل امنیتی نمیخوایم که کاربران به فرم دوم هیچگونه دسترسی ای داشته باشن. برای این امر از چه کد CSSای استفاده می‌کنین؟

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

[/box]

نتیجه گیری

تو این مقاله از آموزش CSS با انتخابگر صفت زیر آشنا شدیم:

selector[attr="value"]

دیدیم این انتخابگر، بر خلاف انتخابگر مقاله قبلی، توانایی انتخاب عناصر بر حسب مقدار صفتشون هم داره.

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

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

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

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

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

4 نظر

4 پاسخ

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

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

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

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

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

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