سلکتور های css بخش هفتم
سلکتور های css بخش هفتم “href$=”.jpg و “foo~=”bar
سلکتور های css بخش هفتم را جهت استفاده شما همراهان گرامی سایت آموزی تدارک دیدیم.
در این بخش از سری مقالات سلکتورهای css به بررسی سه سلکتور دیگر می پردازیم.
سلکتور های css بخش هفتم
انتخابگر ( X[href$=”.jpg”] Selector )
این انتخابگر پس از معرفی المان مورد نظر با یک href در داخل براکت شروع می شود.
href نشان دهنده مسیردهی عنصر انتخابی است. پس از آن یک کاراکتر $ می آید.
این کاراکتر در حقیقت آخرین بخش مسیر عنصر انتخابی را مشخص می کند.
در مثال زیر فرض کنید سلکتور a در انتهای مسیر عکس به jpg. ختم می شود.
a[href$=”.jpg”]
در چنین حالتی تنها آن دسته از تگ های a انتخاب می شوند که انتهای مسیر آنها به فرمت jpg. ختم شود.
به عبارت دیگر سایر فرمت های تصاویر همچون gif و png و… اگر در سند موجود باشند، انتخاب نخواهند شد.
برای کسب اطلاعات بیشتر در مورد یادگیری طراحی وب حتما به صفحه آموزش طراحی سایت سر بزنید.
انتخابگر ( X[data-*=”foo”] Selector ) در سلکتور های css بخش هفتم
اما اگر فرمت خاصی مد نظر شما نباشد. و بخواهید همه فرمت های عکس مسیر داده شده درون تگ a را سلکت کنید چکار می کنید؟
یک روش این است که تک به تک فرمت ها را به روشی که بالا ذکر کردم سلکت کنید.
اما اینکار منطقی و صحیح نیست. راه حل مناسب برای شما استفاده از روش دیگری است که توضیح میدم.
ابتدا به تگ a مورد نظر سند خودتان یک صفت data-filetype بدهید.
<a href=photo.jpg data-filetype=”image” >link-picture</a>
با این روش با تعیین صفت data-filetype کلیه تگ های a که با هر فرمتی در href مسیردهی شدند، انتخاب می شوند.
a[data-filetype=”image”] { width: 300px; }
توسط کد بالا کلیه عکس ها با هر فرمتی که در تگ a مسیردهی شدند انتخاب شده و عرض همه به 300 پیکسل تغییر می کند.
انتخابگر ( X[foo~=”bar”] Selector ) در سلکتور های css بخش هفتم
سلکتور کاربردی دیگری وجود دارد که با کاراکتر ~ همراه است.
این کاراکتر در حقیقت مقادیر صفتی که با فاصله تعریف کرده اید را جهت انتخاب مشخص می کند.
در مثال زیر یک تگ a را می بینید که در مسیردهی href خود دارای یک عکس با فرمت jpg می باشد.
صفت data-info اگر در این تگ با مقداری دارای فاصله نیز به کار رود سلکت می شود.
<a href=”photo2.jpg” data-info=”external image” ></a>
در مثال بالا در واقع می توانیم عکس مورد نظر را براساس هر دو مقدار external و image سلکت کنیم.
به انتخاب زیر خوب توجه کنید که حق انتخاب هر دومقدار در صفت data-info را داریم.
a[data-info~=”external”] { height: 200px; }
a[data-info~=”image”] { height: 200px; }
نتیجه هر دو کد بالا در سند css شما یکسان است و براساس هر دو مقدار تعیین شده ارتفاع عکس به 200 پیکسل تغییر می کند.
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
سلکتور های css بخش هفتم “href$=”.jpg و “foo~=”bar – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید