pseudo-class CSS

کلاس‌های فرعی چیست؟

کلاس‌های فرعی برای تعریف حالت‌های خاص عناصر استفاده می‌شوند.

مثلاً می‌توان از آن برای:

  • نمونه استایل برای زمانی که ماورای عناصر قرار می‌گیرد تنظیم شود
  • نمونه استایل برای پیوندهای بازدید شده و بازدید نشده تنظیم شود
  • نمونه استایل برای زمانی که عناصر تمرکز دارند تنظیم شود
لطفاً روی من قرار دهید موس را

نحوه استفاده

نحوه استفاده از کلاس‌های فرعی:

selector:pseudo-class {
  property: value;
}

کلاس‌های فرعی مکانی:

پیوندها می‌توانند به روش‌های مختلف نمایش داده شوند:

مثال

/* پیوند بازدید نشده */
a:link {
  color: #FF0000;
}
/* پیوند بازدید شده */
a:visited {
  color: #00FF00;
}
/* پیوند زمانی که ماورای آن قرار می‌گیرد */
a:hover {
  color: #FF00FF;
}
/* پیوند انتخاب شده */
a:active {
  color: #0000FF;
}

آزمایش کنید

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

کلاس‌های فرعی و کلاس‌های CSS

میتوان کلاس‌های فرعی با کلاس‌های CSS ترکیب کرد:

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

مثال

a.highlight:hover {
  color: #ff0000;
}

آزمایش کنید

زمانی که بر روی <div> قرار می‌گیرد

در عناصر <div> استفاده شود :hover مثال‌های کلاس فرعی：

مثال

div:hover {
  background-color: blue;
}

آزمایش کنید

نمایندگی ساده‌ای از ابزار نما

مثل این روی عناصر <div> قرار دهید تا عناصر <p> نمایش داده شود (مثل اثر ابزار نما).

مثل این روی من قرار دهید تا عناصر <p> نمایش داده شود.

هی هی، من اینجا هستم!

مثال

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

آزمایش کنید

CSS - پنهان‌کننده :first-child

:first-child پنهان‌کننده‌ها با عناوری که با عناوری دیگر مطابقت دارد مطابقت دارند: این عناوری اولین فرزند عناوری دیگر است.

اولین <p> عناوری انتخاب می‌شود

در مثال‌های زیر، انتخاب‌کننده با انتخاب‌کننده‌ای که به عنوان اولین فرزند هر عناوری است، با انتخاب‌کننده هر <p> عناوری انتخاب می‌شود:

مثال

p:first-child {
  color: blue;
}

آزمایش کنید

همه عناصر <i> در عناصر <p> انتخاب می‌شوند

در مثال‌های زیر، انتخاب‌کننده با انتخاب‌کننده‌ای که به عنوان اولین فرزند یک عناصر است، با انتخاب‌کننده <p> عناصر <i> در آن انتخاب می‌شود:

مثال

p i:first-child {
  color: blue;
}

آزمایش کنید

همه عناصر <i> در اولین <p> عناصر انتخاب می‌شوند

در مثال‌های زیر، انتخاب‌کننده با انتخاب‌کننده‌ای که به عنوان اولین فرزند یک عناصر دیگر است، با انتخاب‌کننده <p> عناصر <i> در آن انتخاب می‌شود:

مثال

p:first-child i {
  color: blue;
}

آزمایش کنید

CSS - پنهان‌کننده :lang

:lang پنهان‌کننده‌ها به شما اجازه می‌دهند که برای زبان‌های مختلف قوانین خاصی تعریف کنید.

در مثال‌های زیر،:lang برای تعریف نقل قول برای عناصر <q> با ویژگی lang="en" نقل قول‌ها را تعریف کنید:

مثال

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>نوشته‌ای <q lang="no">یک نقل قول در یک پاراگراف</q> نوشته‌ای.</p>
</body>
</html>

آزمایش کنید

مثال‌های بیشتر

استایل‌های مختلف برای لینک‌های اضافی
این مثال نشان می‌دهد که چگونه می‌توان از دیگر استایل‌ها به لینک‌های اضافی اضافه کرد.
استفاده از :focus
این مثال نشان می‌دهد که چگونه از پنهان‌کننده :focus استفاده می‌شود.

همه CSS پنهان‌ها

انتخاب‌کننده مثال توضیح مثال
:active a:active انتخاب لینک‌های فعال.
:checked input:checked انتخاب هر عناصر <input> انتخاب شده.
:disabled input:disabled انتخاب هر عناصر <input> غیرفعال.
:empty p:empty انتخاب هر <p> عناصر بدون فرزند.
:enabled input:enabled انتخاب همه عناصر <input> که فعال هستند.
:first-child p:first-child انتخاب هر عناصر <p> که اولین فرزند والد خود است.
:first-of-type p:first-of-type انتخاب هر عناصر <p> که اولین فرزند والد خود است.
:focus input:focus انتخاب عناصر <input> که تمرکز دارند.
:hover a:hover انتخاب لینک‌هایی که ماوس بر روی آن‌ها قرار دارد.
:in-range input:in-range انتخاب عناصر <input> که ارزش در محدوده مشخص شده دارند.
:invalid input:invalid انتخاب همه عناصر <input> که ارزش نامعتبر دارند.
:lang(language) p:lang(it) انتخاب همه عناصر <p> که ارزش attribute lang با "it" شروع می‌شود.
:last-child p:last-child انتخاب هر عناصر <p> که آخرین فرزند والد خود است.
:last-of-type p:last-of-type انتخاب هر عناصر <p> که آخرین فرزند والد خود است.
:link a:link انتخاب همه لینک‌هایی که بازدید نشده‌اند.
:not(selector) :not(p) انتخاب عناصر که هیچ یک از عناصر <p> نیستند.
:nth-child(n) p:nth-child(2) انتخاب هر عناصر <p> که دومین فرزند والد خود است.
:nth-last-child(n) p:nth-last-child(2) انتخاب هر عناصر <p> که دومین فرزند والد خود است، از آخرین فرزند شروع می‌شود.
:nth-last-of-type(n) p:nth-last-of-type(2) انتخاب هر عناصر <p> که دومین فرزند والد خود است، از آخرین فرزند شروع می‌شود.
:nth-of-type(n) p:nth-of-type(2) انتخاب هر عناصر <p> که دومین فرزند والد خود است.
:only-of-type p:only-of-type انتخاب هر عناصر <p> که تنها فرزند والد خود است.
:only-child p:only-child انتخاب عناصر <p> به عنوان تنها فرزند عنصر والد.
:optional input:optional انتخاب عناصر <input> که مشخصات "required" را ندارند.
:out-of-range input:out-of-range انتخاب عناصر <input> که مقادیر در محدوده‌ی مشخص شده نیستند.
:read-only input:read-only انتخاب عناصر <input> که مشخصات "readonly" را دارند.
:read-write input:read-write انتخاب عناصر <input> که مشخصات "readonly" را ندارند.
:required input:required انتخاب عناصر <input> که مشخصات "required" را دارند.
:root root انتخاب عنصر ریشه‌ای عناصر.
:target #news:target انتخاب عنصر فعلی #news (کلیک بر روی URL شامل نام این آیکون).
:valid input:valid انتخاب همه‌ی عناصر <input> با مقادیر معتبر.
:visited a:visited انتخاب همه‌ی لینک‌های بازدید شده.

تمام پseudo-elements CSS

انتخاب‌کننده مثال توضیح مثال
::after p::after محتوایی را بعد از هر عناصر <p> قرار دهید.
::before p::before محتوایی را قبل از هر عناصر <p> قرار دهید.
::first-letter p::first-letter انتخاب اولین حرف هر عناصر <p>.
::first-line p::first-line انتخاب اولین خط هر عناصر <p>.
::selection p::selection انتخاب بخشی از عناصر انتخاب شده توسط کاربر.