آشنایی با سلکتورها در CSS - بخش سوم

کلاس های کاذب در CSS یا pseudo-classes

یک کلاس کاذب برای تعریف یک حالت خاص در یک عنصر مورد استفاده قرار می گیرد.
مثلا استایل دهی به یک عنصر موقعی که بر روی آن قرار می گیرید. یا استایل دادن به لینک هایی که هنوز روی آنها کلیک نشده و همچنین لینک هایی که عمل کلیک بر روی آنها صورت گرفته. و یا استایل دادن به یک عنصر موقعی که در داخل آن کلیک می کنیم (مثل اینپوت ها در عناصر فرم).

کلاس های کاذب در لینک ها

a:link
a:visited
a:hover
a:active

لینک ها می توانند به طرق مختلف نمایش داده شوند:

Anchor Pseudo-classes

نکته: کلاس a:hover باید حتما بعد از کلاس های a:link وa:visited قرار بگیرید وگرنه تاثیر آن را مشاهده نخواهید کرد! و همچنین کلاس a:active باید بعد از کلاس a:hover تعریف شده باشد.

کلاس های کاذب به همراه کلاس ها در CSS

کلاس های کاذب می توانند با کلاس ها در سی اس اس ترکیب شوند.
در این مثال موقعی که شما بر روی لینک می روید رنگ آن تغییر می کند:

Pseudo-classes and CSS Classes

عمل هاور بر روی تگ div

در این مثال وقتی بر روی تگ دیو قرار می گیریم رنگ پس زمینه به آبی تغییر می کند:

Hover on <div>

یک هاور تولتیپ ساده

در این مثال وقتی بر روی تگ دیو قرار می گیریم یک تگ پی بصورت تولتیپ و راهنما ظاهر می شود:

Simple Tooltip Hover

کلاس کاذب first-child: در CSS

در این مثال اولین تگ p که فرزند تگ body است انتخاب می شود. توجه داشته باشید که این سلکتور بر روی عناصری که سیبلینگ و در یک سطح قرار دارند اعمال می شود:
در این مثال اولین تگ i که فرزند تگ های پی هستند انتخاب می شود:

Match the first <p> element

در این مثال تگ های i ای که در اولین تگ پی قرار دارند انتخاب می شوند:

Match all <i> elements in all first child <p> elements

برای انجام مثال های بیشتر می توانید به این لینک ها رجوع بکنید:

Add different styles to hyperlinks

Use of :focus