جلسه ۶۳ – انتخابگر صفت $ و * در CSS

انتخابگر صفت $ چیست؟ انتخابگر صفت * چیست؟ چگونه از انتخابگر صفات برای کلمات انتهایی استفاده کنیم؟ تفاوت انتخابگر صفات $ و * در چیست؟

به مقاله پنجم و آخر این فصل می‌رسیم! تو این مقاله هم مثل مقاله قبل، دو انتخابگر صفت رو بررسی می‌کنیم.

این دو انتخابگر هم تقریبا کاربرد های مشابهی دارن.

نحوه نوشتار

انتخابگر صفت $

برای استفاده از این انتخابگر، کافیه از نحوه نوشتار و سینتکس زیر تبعیت کنیم.

انتخابگر صفت *

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

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

انتخابگر $

کاربرد این انتخابگر رو می‌تونیم به این شکل خلاصه کنیم: این انتخابگر، عناصری رو انتخاب می‌کنه که کلمه نوشته شده در اون، کلمه آخر مقدار صفت عنصر مورد نظره.

مفهوم این جمله چیه؟

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

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

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

کافیه بنویسیم:

img[title$="mosque"]{
   width:500px;
   height:300px;
}

نکاتی که باید در مورد ” کلمه آخر مقدار صفت عنصر ” بهشون توجه کنیم:

• می‌تونه به شکل جدا گونه باشه. مثل “the mosque”
• می‌تونه همراه با خط فاصله باشه “the-mosque”
• و می‌تونه کاملا پیوسته باشه “theMosque”

انتخابگر *

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

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

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

برای انتخاب عنصر آخر، کافیه بنویسیم:

img[title*="sq"]{
   width:500px;
   height:300px;
}

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

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

مثال ها

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

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

می‌خوایم با کمک انتخابگر صفات، عنصر دوم رو انتخاب کنیم و ابعاد عکسش رو تغییر بدیم.

کافیه بنویسیم:

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

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

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

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

حالا می‌خوایم عناصری رو انتخاب کنیم که تو مقدار صفت title اون ها،‌ عبارت ” r ” رو داریم. کافیه بنویسیم:

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

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

پایان ترم

سوال:

با توجه به کد زیر، چطور می‌تونیم عناصر p اول، سوم و چهارم رو انتخاب کنیم؟

<p class="iran">2</p>
<p class="poland">2</p>
<p class="nigeria">2</p>
<p class="russia">2</p>
<p class="afghanistan">2</p>
<p class="spain">2</p>
<p class="indonesia">2</p>

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

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

نتیجه گیری

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

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

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

خب، این فصل هم به پایان رسید، امیدوارم که براتون مفید بوده باشه 🙂

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

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