جلسه ۶۰ – انتخابگر صفت [“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;
}

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

نکته: تو این مثال از شبه عنصر 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; 
}

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

پایان ترم

سوال:

به کد 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ای استفاده می‌کنین؟

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

نتیجه گیری

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

selector[attr="value"]

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

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

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