سلکتور های css بخش هفتم “href$=”.jpg و “foo~=”bar

سلکتور های css بخش هفتم را جهت استفاده شما همراهان گرامی سایت آموزی تدارک دیدیم.

در این بخش از سری مقالات سلکتورهای css به بررسی سه سلکتور دیگر می پردازیم.

سلکتور های css بخش هفتم

سلکتور های css بخش هفتم "href$=".jpg و "foo~="bar

انتخابگر ( X[href$=”.jpg”] Selector )

این انتخابگر پس از معرفی المان مورد نظر با یک href در داخل براکت شروع می شود.

href نشان دهنده مسیردهی عنصر انتخابی است. پس از آن یک کاراکتر $ می آید.

این کاراکتر در حقیقت آخرین بخش مسیر عنصر انتخابی را مشخص می کند.

در مثال زیر فرض کنید سلکتور a در انتهای مسیر عکس به jpg. ختم می شود.

a[href$=”.jpg”] 

در چنین حالتی تنها آن دسته از تگ های a انتخاب می شوند که انتهای مسیر آنها به فرمت jpg. ختم شود.

به عبارت دیگر سایر فرمت های تصاویر همچون gif و png و… اگر در سند موجود باشند، انتخاب نخواهند شد.

انتخابگر ( X[data-*=”foo”] Selector )

اما اگر فرمت خاصی مد نظر شما نباشد. و بخواهید همه فرمت های عکس مسیر داده شده درون تگ a را سلکت کنید چکار می کنید؟

یک روش این است که تک به تک فرمت ها را به روشی که بالا ذکر کردم سلکت کنید.

اما اینکار منطقی و صحیح نیست. راه حل مناسب برای شما استفاده از روش دیگری است که توضیح میدم.

ابتدا به تگ a مورد نظر سند خودتان یک صفت data-filetype بدهید.

[html]<a href=photo.jpg data-filetype=”image” >link-picture</a>[/html]

با این روش با تعیین صفت data-filetype کلیه تگ های a که با هر فرمتی در href مسیردهی شدند، انتخاب می شوند.

a[data-filetype=”image”] { width: 300px; }

توسط کد بالا کلیه عکس ها با هر فرمتی که در تگ a مسیردهی شدند انتخاب شده و عرض همه به 300 پیکسل تغییر می کند.

انتخابگر ( X[foo~=”bar”] Selector )

سلکتور کاربردی دیگری وجود دارد که با کاراکتر ~ همراه است.

این کاراکتر در حقیقت مقادیر صفتی که با فاصله تعریف کرده اید را جهت انتخاب مشخص می کند.

در مثال زیر یک تگ a را می بینید که در مسیردهی href خود دارای یک عکس با فرمت jpg می باشد.

صفت data-info اگر در این تگ با مقداری دارای فاصله نیز به کار رود سلکت می شود.

[html]<a href=”photo2.jpg” data-info=”external image” ></a>[/html]

در مثال بالا در واقع می توانیم عکس مورد نظر را براساس هر دو مقدار external و image سلکت کنیم.

به انتخاب زیر خوب توجه کنید که حق انتخاب هر دومقدار در صفت data-info را داریم.

a[data-info~=”external”] { height: 200px; }

a[data-info~=”image”] { height: 200px; }

نتیجه هر دو کد بالا در سند css شما یکسان است و براساس هر دو مقدار تعیین شده ارتفاع عکس به 200 پیکسل تغییر می کند.

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

سلکتور های css بخش هفتم “href$=”.jpg و “foo~=”bar – اختصاصی سایت آموزی