انتخابگرهای کاذب در CSS
انتخابگرهای کاذب کلمه های کلیدی هستند که آنها را میتوان به سلکتورهای دیگر اضافه کرد ، این انتخابگرها همیشه به همراه علامت دو نقطه (:) به کار میروند.
انتخابگرهای کاذب را میتوان به دو دسته ی کلی تقسیم بندی کرد:
- المان های کاذب (Psuedo elements)
- کلاس های کاذب (Psuedo classes)
المان های کاذب :
با استفاده از انتخابگرهای کاذب میتوان بخشی از یک المان را انتخاب و استایل های CSS را روی آن اعمال کرد , چهار دستور وجود دارد که زیر مجموعه ی المان های کاذب هستند:
- first-letter
- first-line
- before
- after
انتخابگر های first-letter و first-line :
با استفاده از انتخابگر first-letter: و first-line: به ترتیب میتوان استایل مورد نظر را بر روی اولین حرف و اولین خط از یک المان اعمال کرد. این انتخابگرها فقط بر روی تگ هایی که خاصیت بلاک (block) دارند عمل میکند به عنوان مثال پاراگراف ها.
| p:first-letter{font-size: 120%;} p:first-line{font-weight: bold;} |
در مثال بالا اولین دستور باعث میشود قوانین css بر روی اولین کاراکتر پاراگراف اعمال شوند و سایز اولین کاراکتر پاراگراف 20 درصد بزرگتر به نظر برسد ، همچنین دومین دستور باعث میشود که اولین خط از پاراگراف به صورت bold شده در آید.
انتخابگرهای before و after :
همانطور که از نام انتخابگرهای before: و after: پیداست ، این انتخابگرها مکان قبل و بعد از یک المان را مورد انتخاب قرار میدهند. از این انتخابگرها به همراه خاصیت content میتوان محتوایی را قبل یا بعد از یک المان اضافه کرد.
| p:before{content:”Before”;} p:after{content:”After”;} |
این قوانین باعث می شوند پاراگراف زیر به صورت BeforeMiddleAfter نمایش داده شود!!!
| <p>Middle</p> |
خاصیت content به صورت خاص همراه با after: و before: به کار میرود و تنها خاصیتی است که مرز بین محتوا (html) و طراحی (css) را از بین میبرد. به یاد داشته باشید که این مرز تنها هنگامی باید شکسته شود که قرار است قسمتی از محتوا با تصمیم گیری های طراح ایجاد شود. به عنوان مثال با استفاده از خاصیت content میتوان یک ایکن را قبل از یک المان قرار داد که این کار با استفاده از تابع url انجام پذیر است :
| p.bullet:before{content:url(my-bullet.png);} |
تابع url را برای مشخص کردن آدرس تصویر مورد نظر استفاده میکنیم.
کلاس های کاذب :
کلاس های کاذب بخشی از صفحه را برحسب روابط بین المان ها و اطلاعاتی که در HTML یافت نمی شوند انتخاب میکند. کلاس های کاذب را میتوان در 3 دسته ی کلی قرار داد:
- نوع پویا (dynamic)
- ساختار یافته (structural)
- رابط کاربر (user interface)
کلاس های کاذب نوع پویا :
این نوع کلاس های کاذب برای اعمال استایل های CSS بر روی لینک ها یا دیگر المان های تعاملی (interactive) در هنگامی که تغییر حالت میدهند استفاده می شود ، پنج تا از آنها در CSS2 معرفی شده است که به صورت زیر هستند :
- link
- visited
- hover
- active
- focus
حال به بررسی هرکدام از کلاس های کاذب پویای بالا میپردازیم :
link و visited :
کلاس های پویای link: و visited: را فقط میتوان بر روی تگ لینک (<a>) اعمال کرد. کلاس link: لینک هایی از صفحه که هنوز بازدید نشده اند را انتخاب میکند در حالی که visited: لینک هایی که مورد بازدید قرار گرفته اند را مورد انتخاب قرار می دهد.
| a:link{ } /* unvisited links */ a:visited{ } /* visited links */ |
در مثال بالا طریقه ی استفاده از visited: و link: را نشان دادیم.
active و hover :
کلاس کاذب active: المان هایی را تحت انتخاب قرار میدهد که فعال شده باشند!!! برای مثال نگهداشتن کلیک موس بر روی یک تگ یا نگهداشتن انگشت خود در صفحات لمسی موبایل بر روی قسمتی از صفحه باعث میشود که ان قسمت به حالت فعال درآید.
| a:active{ }/* actived links */ |
کلاس hover و active را میتوان با تمامی تگ ها به کار برد (برخلاف link و visited که فقط با لینک ها به کار میروند).
انتخابگری که کلاس کاذب hover: به آن افزوده شده باشد قسمتی را مورد انتخاب قرار میدهد که نشانگر موس بر روی آن قرار داشته باشد یا اینکه در صفحات لمسی آن قسمت لمس شده باشد!
| a:hover{ }/* hoverd links */ |
کلاس کاذب hover: را میتوان همراه تمامی المان ها مورد استفاده قرار داد.
هنگامی که از کلاس های کاذب link و visited و hover و active برای یک المان استفاده میکنید برای اینکه استایل های CSS شما به درستی نمایش داده شوند این کلاس های کاذب را باید طبق ترتیب خاصی مورد استفاده قرار داد. کلاس کاذب hover باید بعد از link و visited قرار بگیرد همچنین active باید بعد از hover قرار گیرد.
| a:link{ } a:visited{ } a:hover{ } a:active{ } |
مثال بالا ترتیب استفاده از این چهار کلاس کاذب را نشان می دهد.
focus :
این کلاس کاذب تنها برای اٍلمان هایی مورد استفاده قرار میگیرد که فوکوس پذیر هستند! بدین معنی که میتوان با صفحه کلید آنها را کنترل کرد. برای مثال تگ <input> این قابلیت را داراست.
تفاوت میان active: و focus: در این است که active: در طول کلیک کردن پایدار است اما focus: تا زمانی که اٍلمان فوکوس خود را از دست دهد باقی میماند.
| a:focus{ } |
از کلاس کاذب focus در مرورگر IE8 به بالا میتوان استفاده کرد.
