علاوه بر شبه عناصر (Pseudo-Elements) ، در طراحی سایت با css ، ویژگی دیگری نیز به نام شبه کلاس (pseudo-class) وجود دارند. در این بخش از آموزش css قصد داریم این ویژگی را برای شما کاربران عزیز شرح دهیم.
شبه کلاس ها چه هستند؟
یک شبه کلاس (pseudo-class) در طراحی سایت با css برای تعریف یک حالت خاص از یک عنصر استفاده می شود. برای مثال می توان از آن در طراحی سایت برای موارد زیر استفاده کرد.
• تعیین سبک یک عنصر زمانی که کاربر، موس را بر روی آن عنصر قرار می دهد.
• ایجاد سبک متفاوت بین لینک های دیده شده و لینک های بازدید نشده
• ارائه سبک خاص به یک عنصر ، زمانی که بر روی آن تمرکز می شود
نحوه نوشتن شبه کلاس ها در سند css به شکل زیر است:
selector:pseudo-class {
property:value;
}
شبه کلاس های Anchor
لینک ها را می توان به روش های مختلفی نشان داد. در مثال زیر چند نمونه از روش های نمایش لینک ها در css را ارائه کرده ایم.
/* لینک های مشاهده نشده */
a:link {
color: #FF0000;
}
/* لینک های مشاهده شده */
a:visited {
color: #00FF00;
}
/* زمانی که موس بر روی لینک قرار می گیرد */
a:hover {
color: #FF00FF;
}
/* لینک های انتخاب شده */
a:active {
color: #0000FF;
}
شبه کلاس ها و کلاس ها درCSS
شبه کلاس می توانند با کلاس ها در CSS ترکیب شوند. لازم به ذکر است که شبه کلاس ها در css به کوچکی و بزرگی حروف حساس نیستند.
a.highlight:hover {
color: #ff0000;
}
div:hover {
background-color: blue;
}
شبه کلاس first-child: در css
شبه کلاس first-child: ، یک عنصر مشخص را که اولین فرزند یک عنصر دیگر است، تطبیق می دهد.
تطبیق اولین عنصر <p>
در مثال زیر در طراحی سایت ، سلکتور، هر عنصر <p> که اولین فرزند یک عنصر دیگر است را تطبیق داده است.
p:first-child {
color: blue;
}
شبه کلاس lang: در css
این شبه کلاس، به شما این امکان را می دهد تا قوانین خاصی برای زبان های مختلف در طراحی سایت ، تعریف کنید. در مثال زیر،شبه کلاس lang: ، برای عناصر <q>، با ترکیب "lang="no، علامت کوتیشن را تعریف می کند.
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>