مرجع CSS فارسی

PSEUDO-CLASS

dir():

 شبه کلاس ()dir: برای انتخاب المان ها بر اساس جهت نمایش آن ها (چپ به راست در انگلیسی) کاربرد فراوانی دارد . 

برای تعیین جهت نمایش المانی مثل پاراگراف در CSS از خصوصیت direction استفاده می کنیم. با این حال شبه کلاس ()dir: ، المان هایی که صرفا با استفاده از CSS جهت دهی شده اند را انتخاب نمی کند. بلکه برای استفاده از این شبه کلاس باید جهت دهی را در فایل HTML انجام داد.

در HTML5 ، جهت دهی به یک المان را می توان با استفاده از ویژگی ” dir ” اعمال کرد . به مثال زیر توجه کنید.

<article dir="rtl">
    <!-- ... -->
</article>
                

شبه کلاس ()dir: یک آرگومان یا ورودی را می پذیرد . که می تواند ” ltr ” یا ” rtl ” باشد. انتخابگر (dir(rtl: ، المان هایی که جهت گیریشان از راست به چپ است را انتخاب می کند.

سایر نکات

اگر از ویژگی dir در سند HTML تان استفاده کنید . همچنین می توانید از attribute selector برای انتخاب آن استفاده کنید .

article[dir="rtl"] {
    /* styles applied to article elements that have a rtl directionality set using the dir attribute */
}
                

البته ، می بایست در نظر داشت که کارایی ()dir: با [ “” = dir] متفاوت است . با  استفاده از [ “” = dir] صرفا می توانید المان هایی را انتخاب کنید که ویژگی dir برای شان نوشته شده باشد . اما ()dir: علاوه بر مورد یاد شده ، المان هایی که جهت گیری شان پیش فرض باشد یا از والد خود ارث برده باشند را نیز انتخاب می کند.

مثال ها

تکه کد  زیر تمام المان هایی که جهت گیری شان از چپ به راست باشد را انتخاب می کند.

*:dir(ltr) {
    /* styles here */
}
                

انتخاب بلوک نقل قول :

blockquote:dir(rtl) {
    /* styles here */
}
                

در دموی زیر رنگ متن انگلیسی آبی و رنگ متن فارسی سبز است . درغیر این صورت بخش پشتیبانی مرورگر را مطالعه بفرمایید.

See the Pen :dir() by alishooti (@alishooti) on CodePen.0

ساپورت مرورگر

()dir: فعلا فقط در Firefox با پیش وند moz- پشتیبانی می شود .

بیشتر بخوانید

استفاده از این متون آموزشی و کپی برداری از آن ها بلامانع می باشد. توجه شود که ذکر منبع به شدت روحیه دهنده است 😉 .

همچنین منتظر دیدگاه های شما هستیم.