انتخابگر صفت شروع کننده چیست؟ چگونه از انتخابگر صفت | استفاده کنیم ؟ چگونه از انتخابگر صفت ^ استفاده کنیم؟ فرق انتخابگر | و ^ در چیست؟
در مقاله چهارم این فصل از آموزش طراحی وب سایت با 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 ، با دو انتخابگر صفت | و ^ آشنا شدیم.
مشاهده کردیم که با کمک این دو انتخابگر، میتونیم عناصر رو با توجه به کلمه اول مقدار صفتشون انتخاب کنیم.
در انتخابگر اول، یعنی |، باید کلمه مورد نظر ما توسط ” – ” از بقیه کلمات در مقدار صفت جدا میشد، اما در انتخابگر دوم میتونستیم از مقادیر صفتی که توسط ” – ” از هم جدا نشدن هم استفاده کنیم.
به پایان مقاله چهارم این فصل میرسیم. تو جلسه بعدی با ما همراه باشین 🙂
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
4 پاسخ
div[class|=nice]{
width: 200px;
background-color: #ff9100;
}
درسته متین ممنون ازت 🙂
div[class|=”nice-pic”]{
color: red;
}
کاملا درسته 🙂