نرم افزار حسابداری حسیب

آموزش CSS

شبه کلاس‌ها (Pseudo-Class) در Css

شبه کلاس‌ها (Pseudo-Class) در 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>

Print

نظرات بسته شده است.

دی ان ان فارسی , مرجع دات نت نیوک فارسی