جلسه ۶۱ – انتخابگر صفت ~ در CSS

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

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

نحوه نوشتار

نحوه نوشتار و سینتکس انتخابگر مورد نظر، به شکل زیر هست:

همونطور که در این تصویر از آموزش طراحی وب سایت میبینیم، بر خلاف انتخابگر های ساده تر، شاهد علامت ‍~ هستیم. ولی کاربرد این علامت چیه؟

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

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

یعنی چی؟

یعنی اول از همه عناصری رو پیدا می‌کنه که دارای صفت مورد نظر ما باشن، و سپس از بین اون ها، عنصری رو انتخاب می‌کنه که کلمه مورد نظر رو در مقدار صفتش داشته باشه.

برای روشن تر شدن بحث به کد زیر توجه کنین:

img[title~="mosque"]{
width: 200px;
}

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

مثال ها

مثال اول
تو این مثال، کدی که تو قسمت کاربرد انتخابگر اومد رو با هم امتحان می‌کنیم. به کد HTML زیر توجه کنین:

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

حالا کد CSS زیر رو برای انتخاب کردن عنصر آخر img، بهش اضافه می‌کنیم:

img{
   width:300px;
   height:200px;
   display: inline-block;
}
img[title~="mosque"]{
   width:500px;
   height:300px;
}

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

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

مثال دوم
حالا اگه سعی کنیم که عناصر رو با استفاده از صفت src انتخاب کنیم چه اتفاقی میفته؟

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

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

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

قطعه کد CSS دوم کار نمی‌کنه.

اینجا ما یه نکته رو یاد می‌گیریم: انتخابگر صفات ~، فقط روی کلمات جدا تاثیر داره.

/* --- کار میکنه --- */
title="beautiful sky";

/* --- کار نمیکنه --- */
title="beautifulsky";

/* --- کار نمیکنه --- */
title="beautiful.sky";

پایان ترم

سوال:

چه تفاوتی بین دو انتخابگر صفت زیر وجود داره؟

selector[attr="value"];
selector[attr~="value"];

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

نتیجه گیری

تو این مقاله از آموزش جامع CSS ، با انتخابگر صفت ~ آشنا شدیم که توانایی انتخاب عناصر رو با توجه به وجود یک کلمه خاص در مقادیر صفات اون ها داره.

جلسه سوم این فصل به پایان می‌رسه، تو جلسه چهارم میبینمتون 🙂

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

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