CSS Pseudo-classes

🎯 شبه‌کلاس‌ها (Pseudo-classes) در CSS

شبه‌کلاس‌ها در CSS به شما اجازه می‌دهند تا عناصر HTML را در **وضعیت‌های خاص** بدون نیاز به افزودن کلاس یا ID، انتخاب و استایل‌دهی کنید. این وضعیت‌ها می‌توانند شامل وضعیت‌های تعاملی کاربر (مانند hover، focus)، ساختاری (مانند first-child) یا پویا (مانند active، visited) باشند.

—

✅ شبه‌کلاس‌های پرکاربرد:

1. `:hover`
زمانی اعمال می‌شود که کاربر نشانگر ماوس را روی یک عنصر ببرد.

“`css

button: hover {
background-color: blue;
}

“`

2. `:focus`
برای زمانی است که یک عنصر (مانند input) فوکوس می‌گیرد.

“`css
input :focus {
border-color: green;
}
“`

3. `:active`
هنگام کلیک فعال روی یک عنصر (در حال فشرده شدن) اعمال می‌شود.

“`css
a :active {
color: red;
}
“`

4. `:visited`
لینک‌هایی که قبلاً توسط کاربر بازدید شده‌اند را هدف قرار می‌دهد.

“`css
a :visited {
color: purple;
}
“`

5. `:first-child`
اولین فرزند یک عنصر والد را هدف می‌گیرد.

“`css
p :first-child {
font-weight : bold;
}
“`

6. `:last-child`
آخرین فرزند یک عنصر والد را هدف می‌گیرد.

p :last-child {
margin-bottom: 0;
}
“`

7. `:nth-child()`
فرزندان را بر اساس شماره‌ جایگاه انتخاب می‌کند.

“`css
li: nth-child(odd) {
background-color: #f4f4f4;
}
“`

8. `:nth-of-type()`
مانند `nth-child` است، اما فقط عناصری از نوع خاص (مثلاً فقط `<p>`) را در نظر می‌گیرد.

“`css
p:nth-of-type(2) {
color: red;
}
“`

9. `:not()`
عناصری که با یک سلکتور مشخص مطابقت ندارند را انتخاب می‌کند.

“`css
div: not(.special) {
background-color: gray;
}
“`

10. `:empty`
عناصری که هیچ فرزندی (متن یا تگ) ندارند را انتخاب می‌کند.

“`css
div: empty {
display: none;
}
“`

11. `:checked`
المان‌هایی که تیک خورده یا انتخاب شده‌اند (مانند چک‌باکس‌ها و رادیوها).

“`css
input: checked {
background-color: yellow;
}
“`

12.`:first-of-type`
اولین عنصر از نوع خاص در بین خواهر و برادرهایش را انتخاب می‌کند.

“`css
div: first-of-type {
border: 1px solid black;
}
“`

—

🧪 نمونه کد کامل:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Pseudo-classes Example</title>
<style>
a: hover {
color: green;
}

p:first-child {
font-size: 20px;
color: blue;
}

li:nth-child(even) {
background-color: lightgray;
}

input:focus {
border-color: red;
}
</style>
</head>
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<a href=”#”>Hover over me</a>

—

نکات مهم:

* شبه‌کلاس‌ها باعث می‌شوند بدون نیاز به دستکاری HTML، استایل‌هایی بر اساس شرایط خاص اعمال کنید.
* می‌توان آن‌ها را با سایر سلکتورها ترکیب کرد تا هدف‌گیری دقیق‌تری داشته باشید.
* از نظر دسترسی (accessibility) و تعامل کاربر بسیار مهم و مفید هستند.