pseudo-class در css کلمات کلیدی هستند که به انتخابگرها برای تعیین یک حالت خاص از عنصر انتخاب شده, اضافه می شوند.
این کلمات کلیدی, مشابه کلاس ها می باشند با این تفاوت که در HTML نوشته نمی شوند.
تفاوت دیگر آنها با دیگر انتخابگرها در این است که pseudo-classها عناصر را با توجه به رفتار کاربر, وضعیت عنصر و غیره بصورت پویا هدف قرار می دهند.
pseudo-class در css چیست
pseudo-class در CSS به شما امکان ایجاد حالت های پویا در یک المان مانند hover (شناور)، active (فعال) و focus (حالت تمرکز) را می دهد، اما نمی توان از آن مانند دیگر انتخابگرها بدون افزودن ID یا class استفاده نمود برای نمونه هدف گذاری فرزند اول و آخر را در نظر بگیرید.
pseudo-class با علامت (:) آغاز می شود.
|
1 |
selector:pseudo-class { property: value; } |
Pseudo-class لینک
این pseudo-class ها به شما اجازه می دهند تا لینک های دیده نشده را به صورت متفاوتی نسبت به موارد بازدید شده طراحی نمایید. معمول ترین تکنیک برای لینک های دیده شده حذف زیر خط ها می باشد.
|
1 2 3 4 5 6 |
a:link { color: blue; } a:visited { text-decoration: none; } |
برخی از anchor ها در pseudo-class به صورت داینامیک می باشند. آنها به عنوان نتیجه تعامل کاربر با سند مانند hover یا focus و غیره اعمال می شوند.
|
1 2 3 4 5 6 7 8 9 |
a:hover { color: red; } a:active { color: gray; } a:focus { color: yellow; } |
این pseudo-class نحوه رندر شدن لینک برای پاسخ به اقدامات کاربر را تغییر می دهند.
:hoverزمانی اعمال می شود که کاربر cursor را بر روی المان قرار داده، اما آن را انتخاب نمی کند.:activeهنگامی که المان فعال یا کلیک شده، اعمال می شود.:focusهنگامی که المان دارای keyboard focus است، اعمال می شود.
نکته: برای اینکه pseudo-class به درستی کار کند، باید آن ها را به صورت درست تعریف کنید.
:first-child
first-child: , المان را با اولین المان فرزند که در المان های دیگر است مطابقت می دهد.
انتخابگر ol li:first-child در مثال زیر اولین آیتم لیست از لیست دستورالعمل را انتخاب کرده و حاشیۀ بالای آن را حذف می کند.
|
1 2 3 |
ol li:first-child { border-top: none; } |
نکته: برای استفاده از first-child: در مرورگر اینترنت اکسپلورر ۸ و نسخه های قدیمی تر <!DOCTYPE> باید در بالای سند اعلام شود.
:last-child
last-child: , المان را با آخرین المان فرزند که در المان های دیگر است مطابقت می دهد.
انتخابگر ul li:last-child در مثال زیر آخرین آیتم لیست از لیست دستورالعمل را انتخاب کرده و حاشیۀ سمت راست آن را حذف می کند.
|
1 2 3 |
ul li:last-child { border-right: none; } |
نکته: انتخابگر last-child: در مرورگر اینترنت اکسپلورر ۸ و نسخه های قدیمی تر پشتیبانی نمی شود و تنها در نسخه های ۹ و بالاتر آن کار می کند.
:nth-child
:nth-child به شما اجازه هدف قرار دادن یک یا چند فرزند خاص از المان والد داده شده را می دهد.
سینتکس پایه برای این سلکتور برابر با nth-child(n): می باشد که در آن n یک آرگومان است که می تواند عدد، کلمه کلیدی (even (زوج)، odd (فرد)) یا عبارتی از فرم xn+y باشد که در آن x و y عدد صحیح هستند (برای مثال ۱n،۲n، ۲n+1 و…).
|
1 2 3 |
table tr:nth-child(2n) td { background: #eee; } |
قوانین استایل در مثال بالا بدون افزودن class و ID به المان های <table> باعث هایلایت ردیف آن ها می شود.
نکته: انتخابگر nth-child(n): در شرایطی که باید المان های آشکار شده در فاصله زمانی یا الگویی مانند محل های زوج یا فرد و… را انتخاب کنید بسیار مفید می باشند.
:lang
:lang به ما اجازه ساخت انتخابگرها بر اساس تنظیمات زبان برای تگ های خاص را می دهد. :lang در مثال زیر علامت نقل قول را برای المان <q> تعریف می کند که مقدار language را no داده است.
|
1 2 3 4 5 |
q:lang(no) { quotes: "~" "~"; } /* HTML code snippet */ <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> |
نکته: مرورگر اینترنت اکسپلورر ۷ از :lang پشتیبانی نمی کند و تنها با اعلام <!DOCTYPE> می توان از آن در اینترنت اکسپلورر۸ استفاده نمود.
pseudo-class و کلاس های CSS
pseudo-class می تواند با کلاس های CSS ترکیب شود.
در مثال زیر لینک با class="red" با رنگ قرمز نمایش داده می شود.
|
1 2 3 4 |
a.red:link { /* style rule */ color: #ff0000; } <a class="red" href="#">Click me</a> /* HTML code snippet */ |
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
