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

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

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

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

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

سلکتور های css بخش هفتم | X[href$=”.jpg”] | سلکتور X[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 بدهید.

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

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

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

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

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

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

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

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

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

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

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

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

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

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