CSS 伪类

کلاس‌های جعلی چیست؟

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

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

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

نحوه استفاده

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

selector:کلاس‌های جعلی {
  ویژگی: مقدار;
}

کلاس‌های جعلی پینگ

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

مثال

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

آزمایش کنید

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

کلاس‌های جعلی و کلاس‌های CSS

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

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

مثال

a.highlight:hover {
  رنگ: #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> را تطبیق دهید

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

مثال

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

آزمایش کنید

همه عناصر <i> در اولین عناصر <p> را تطبیق دهید

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

مثال

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

آزمایش کنید

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

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

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

مثال

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</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> که ارزش اولیه آن‌ها با "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 همه لینک‌های بازدید شده را انتخاب کنید.

همه انتخاب‌کننده‌های جعلی CSS

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