جلسه ۶۱ – انتخابگر صفت ~ در 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";

پایان ترم

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

سوال:

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

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

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

[/box]

نتیجه گیری

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

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

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

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

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

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

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

2 نظر

2 پاسخ

  1. سلام

    selector[attr=”value”];
    توی انتخاب گر اول عنصری رو انتخاب میکنه که صفت مربوط دقیقا مقدار مورد نظر باشه
    selector[attr~=”value”];
    توی انتخاب گرد دوم عناصر رو بر حسب وجود کلمه مورد نظر در مقدار صفت اون ها انتخاب می‌کنه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

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

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

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