جلسه ۶۲ – انتخابگر صفت ‍| و ^ در CSS

قسمت چهارم سلکتور ها یا انتخابگر ها

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

انتخابگر صفت شروع کننده چیست؟ چگونه از انتخابگر صفت | استفاده کنیم ؟ چگونه از انتخابگر صفت ^ استفاده کنیم؟ فرق انتخابگر | و ^ در چیست؟

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

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

نحوه نوشتار

 انتخابگر |

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

نحوه نوشتار انتخابگر صفت |

انتخابگر ^

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

نحوه نوشتار انتخابگر صفت ^

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

انتخابگر |

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

اما با رعایت یک نکته:

  • اگه مقدار صفت ما، از چندین کلمه تشکیل شده، باید کلمه اول توسط ” – ” از کلمات دیگه جدا بشه.

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

<img src="mypicture.jpg" title="picture-of-mine">
img[title="picture"]{
   border: 2px dotted yellow;
}

انتخابگر ^

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

اما یه تفاوت داره، و اون اینه که:

  • کلماتی که به صورت مجزا نیستن هم انتخاب می‌کنه.

یعنی چی؟ به کد HTML و CSS زیر توجه کنین:

<img src="mypicture.jpg" title="pictureOfMine">

ما می‌تونیم عنصر مورد نظر رو به راحتی با کد زیر انتخاب کنیم:

img[title="picture"]{
   border: 2px dotted yellow;
}

مثال ها

مثال اول
تو این مثال، از مثال کاربرد انتخابگر ” | ” استفاده می‌کنیم.

به کد 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="mosque">

توسط کد CSS زیر، عناصر مورد نظر رو با کمک صفت title اون ها انتخاب مي‌کنیم:

img{
   width:300px;
   height:200px;
   display: inline-block;
}
img[title|="car"]{
   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="carOfMine">
<img src="mosque.jpg" title="mosque">

حالا از کد CSS زیر برای انتخاب کردن عناصری استفاده می‌کنیم که صفت title اون ها با کلمه car شروع شده:

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

و مجددا به نتیجه مثال قبل می‌رسیم:

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

پایان ترم

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

سوال:

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

<div class="nice-pic">Div1</div>
<div class="nicepic">Div2</div>
<div class="nicepic">Div3</div>
<div class="nice-pic">Div4</div>
<div class="nicepic">Div5</div>

توسط چه کد CSSای، می‌تونیم div اول و چهارم رو انتخاب کنیم؟

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

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

[/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=