شبه عنصر (Pseudo-Elements) در Css
اردیبهشت ۱۹, ۱۴۰۳
انتخابگرها در Css
اردیبهشت ۱۹, ۱۴۰۳
علاوه بر شبه عناصر (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 به کوچکی و بزرگی حروف حساس نیستند.
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>
