Pseudo-class در CSS برای انتخاب یک حالت خاص از یک عنصر استفاده میشه.
یعنی به جای اینکه فقط خود عنصر رو انتخاب کنیم، میایم یک وضعیت خاص از اون رو هدف قرار می‌دیم.

🔹 شکل کلی نوشتن Pseudo-class:

selector:pseudo-class {
   property: value;
}

✅ پرکاربردترین Pseudo-class ها

1️⃣ :hover

وقتی ماوس روی یک عنصر میره.

button:hover {
  background-color: lightblue;
}

2️⃣ :active

وقتی یک عنصر فعال (کلیک) میشه.

button:active {
  background-color: green;
}

3️⃣ :focus

وقتی یک عنصر (مثلاً input) فوکوس می‌گیره.

input:focus {
  border: 2px solid blue;
}

4️⃣ :first-child

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

p:first-child {
  color: red;
}

5️⃣ :last-child

آخرین فرزند یک عنصر رو انتخاب می‌کنه.

p:last-child {
  color: blue;
}

6️⃣ :nth-child(n)

یک فرزند خاص رو انتخاب می‌کنه (بر اساس شماره).

li:nth-child(2) {
  color: green;
}

🔹 اینجا دومین <li> سبز میشه.
می‌تونیم حتی فرمول بدیم:

li:nth-child(2n) { color: orange; } /* همه زوج‌ها */
li:nth-child(2n+1) { color: purple; } /* همه فردها */

7️⃣ :not(selector)

عناصری رو انتخاب می‌کنه که با انتخابگر مشخص شده مطابقت ندارن.

p:not(.special) {
  color: gray;
}

8️⃣ :checked

برای انتخاب input هایی که تیک خوردن یا انتخاب شدن (checkbox, radio).

input:checked {
  outline: 2px solid red;
}

9️⃣ :disabled و :enabled

برای فرم‌ها کاربرد داره.

input:disabled {
  background: lightgray;
}
input:enabled {
  background: white;
}

📌 مثال ترکیبی

<ul>
  <li>مورد اول</li>
  <li>مورد دوم</li>
  <li>مورد سوم</li>
</ul>

<input type="text" placeholder="نام">
<input type="checkbox" checked>
<button>کلیک کن</button>

li:first-child { color: red; }    /* اولین li */
li:last-child { color: blue; }    /* آخرین li */
li:nth-child(2) { color: green; } /* دومین li */
button:hover { background: pink; }
input:focus { border: 2px solid purple; }
input:checked { outline: 2px solid red; }

✨ نتیجه: Pseudo-class ها به ما اجازه میدن رفتار و حالات مختلف عناصر رو در CSS کنترل کنیم.