آموزش CSS

آموزش CSS - کلاس های Pseudo

انتخابگر (selector) کلاس pseudo-class در CSS کامپوننت ها را بر اساس شرط اضافی مطابقت می دهد و لزوما توسط document tree ( سند درختی)تعریف نمی شوند.

pseudo-class چیست

pseudo-class در CSS به شما امکان ایجاد حالت های پویا در یک المان (element) مانند hover (شناور)، active  (فعال) و focus state (حالت تمرکز) را همانند المان ها در  document tree می دهد، اما نمی توان از آن مانند دیگر انتخابگرها (selectors) بدون افزودن ID یا class استفاده نمود برای نمونه هدف گذاری فرزند اول و آخر را در نظر بگیرید.

pseudo-class با علامت (:) آغاز می شود.

selector:pseudo-class { property: value; }

بخش زیر استفاده معمول از pseudo-class را نشان می دهند.

 

Anchor Pseudo-classes

استفاده از anchor در لینک های pseudo-class  را می توان به راه های مختلف نمایش داد:

این pseudo-class ها به شما اجازه می دهند تا لینک های دیده نشده را به صورت متفاوتی نسبت به موارد بازدید شده  طراحی نمایید. معمول ترین تکنیک برای لینک های دیده شده حذف زیر خط ها می باشد.

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}

برخی از anchor ها در pseudo-class  به صورت پویا (dynamic) می باشند. آنها به عنوان نتیجه تعامل کاربر با document  مانند hover یا focus و غیره اعمال می شوند.

a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

این pseudo-class  نحوه رندر شدن لینک برای پاسخ به اقدامات کاربر را تغییر می دهند.

  • :hover زمانی اعمال می شود که کاربر cursor (جانما) را بر روی المان قرار داده، اما آن را انتخاب نمی کند.
  • :active هنگامی که المان فعال یا کلیک شده، اعمال می شود.
  • :focus هنگامی که المان دارای keyboard focus (تمرکز صفحه کلید) است، اعمال می شود.

نکته: برای اینکه pseudo-class  به درستی کار کند، باید آن ها را به صورت درست تعریف کنید. :link, :visited, :hover, :active, :focus

 

:first-child در pseudo-class 

first-child: در pseudo-class  المان را با اولین المان فرزند که در المان های دیگر است مطابقت می دهد. selector (انتخابگر) ol li:first-child در مثال زیر اولین آیتم لیست از لیست دستورالعمل را انتخاب کرده و حاشیۀ بالای آن را حذف می کند.

ol li:first-child {
    border-top: none;
}

نکته: برای استفاده از first-child: در مرورگر اینترنت اکسپلورر 8 و نسخه های قدیمی تر <!DOCTYPE>  باید در بالای سند اعلام شود.

 

:last-child در pseudo-class 

last-child: در pseudo-class المان را با آخرین المان فرزند که در المان های دیگر است مطابقت می دهد. . selector (انتخابگر) ul li:last-child در مثال زیر آخرین آیتم لیست از لیست دستورالعمل را انتخاب کرده و حاشیۀ سمت راست آن را حذف می کند.

ul li:last-child {
    border-right: none;
}

نکته: انتخابگر last-child: در مرورگر اینترنت اکسپلورر 8 و نسخه های قدیمی تر پشتیبانی نمی شود و تنها در نسخه های 9 و بالاتر آن کار می کند.

 

:nth-child در pseudo-class 

CSS3 ، pseudo-class  جدید :nth-child را معرفی نمود که به شما اجازه هدف قرار دادن یک یا چند فرزند خاص از المان والد داده شده را می دهد. دستور نگارش (syntax) پایه برای این selector (انتخابگر) برابر با nth-child(N): می باشد که در آن N یک آرگومان است که می تواند عدد، کلمه کلیدی (even (زوج)، odd (فرد)) یا عبارتی از فرم xn+y باشد که در آن x و y عدد صحیح هستند (برای مثال 1n،2n، 2n+1 و...).

table tr:nth-child(2n) td {
    background: #eee;
}

قوانین استایل در مثال بالا بدون افزودن class و ID به المان های <table> باعث هایلایت ردیف آن ها می شود.

نکته: انتخابگر nth-child(N): در شرایطی که باید المان های آشکار شده درون document tree در فاصله زمانی یا الگویی مانند محل های زوج یا فرد و... را انتخاب کنید بسیار مفید می باشند.

 

:lang در pseudo-class 

 زبان pseudo-class ، :lang به ما اجازه ساخت انتخابگرها بر اساس تنظیمات زبان برای تگ های خاص را می دهد. :lang در مثال زیر علامت نقل قول را برای المان <q> تعریف می کند که مقدار language (language value) را no داده است.

q:lang(no) {
    quotes: "~" "~";
}
/* HTML code snippet */
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

نکته: مرورگر اینترنت اکسپلورر 7 از :lang پشتیبانی نمی کند و تنها با اعلام <!DOCTYPE>  می توان از آن در اینترنت اکسپلورر8 استفاده نمود.

 

pseudo-class  و کلاس های CSS

pseudo-class می تواند با کلاس های CSS ترکیب شود.

در مثال زیر لینک با class="red" با رنگ قرمز نمایش داده می شود.

a.red:link {    /* style rule */
    color: #ff0000;
}
<a class="red" href="#">Click me</a>    /* HTML code snippet */
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...