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

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

پایان ترم

<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 ، با دو انتخابگر صفت | و ^ آشنا شدیم.

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

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

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

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

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