جلسه ۶۳ – انتخابگر صفت $ و * در 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;
}

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

استفاده از انتخابگر صفت *

پایان ترم

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

سوال:

با توجه به کد زیر، چطور می‌تونیم عناصر 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>

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

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

[/box]

نتیجه گیری

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

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

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

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

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

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

فیلم آموزشی 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=