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

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

پایان ترم

سوال:

به کد 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 اول و چهارم رو انتخاب کنیم؟

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

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

نتیجه گیری

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

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

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

به پایان مقاله چهارم این فصل می‌رسیم. تو جلسه بعدی با ما همراه باشین 🙂

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

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