در حال بارگذاری...

سودوکلاس‌های CSS

سلکتور تگ و class و id و attribute را بلدید. هنوز یک لایه مانده: گاهی نمی‌خواهید همیشه همان ظاهر را بدهید؛ می‌خواهید وقتی ماوس روی دکمه است، یا وقتی کاربر با Tab داخل فیلد است، یا وقتی لینک قبلاً باز شده، ظاهر عوض شود. برای این کارها سودوکلاس دارید — بدون class تازه در HTML.

سودوکلاس یعنی چه؟

سودوکلاس یک کلمه است که با یک دونقطه (:) به سلکتور می‌چسبد. در HTML چیزی مثل class="hover" نمی‌بینید. مرورگر خودش وقتی شرط برقرار است قانون را روشن می‌کند: اشاره‌گر روی عنصر، فوکوس، سابقهٔ لینک، یا جای عنصر بین فرزندان والد.

چند سودوکلاس پرکاربرد

اول همین‌ها را یاد بگیرید. نام‌های بیشتری هست، ولی برای شروع UI معمولاً کافی‌اند.

📊 سودوکلاس‌های روزمرهٔ CSS

سودوکلاس	کی فعال می‌شود	مثال
`:hover`	اشاره‌گر روی عنصر است	`a:hover`
`:focus`	عنصر فوکوس دارد (صفحه‌کلید یا کلیک)	`input:focus`
`:visited`	لینک قبلاً بازدید شده (با محدودیت حریم خصوصی)	`a:visited`
`:first-child`	عنصر اولین فرزند والدش است	`li:first-child`
`:nth-child(n)`	فرزند nاُم، یا فرد/زوج	`tr:nth-child(odd)`
`:disabled`	کنترل فرم خاموش است	`button:disabled`

هاور — `:hover`

با :hover وقتی ماوس (یا اشاره‌گر) روی عنصر است ظاهر عوض می‌شود. دکمه و لینک با یک تغییر کوچک زنده حس می‌شوند — نه با پرش چیدمان.

هاور — بازخورد دکمه

css

CSS Code

button:hover {
background-color: #0f766e;
color: #fff;
}

نکتهٔ هاور

تغییر را ملایم نگه دارید. روی گوشی «هاور» مثل دسکتاپ نیست؛ چیزی که حتماً باید دیده شود را فقط داخل :hover نگذارید.

فوکوس — `:focus`

:focus عنصری را می‌گیرد که الان فعال است — مثلاً با Tab به آن رسیده‌اید. اگر حلقهٔ فوکوس نباشد، کاربر صفحه‌کلید گیج می‌شود که کجای فرم است.

فوکوس — حلقهٔ واضح روی input

css

CSS Code

input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

هاور و فوکوس هر دو لازم‌اند

هاور برای اشاره‌گر است. فوکوس برای «الان این کنترل فعال است». outline را پاک نکنید مگر جایگزین هم‌وضوح بگذارید.

لینک بازدیدشده — `:visited`

:visited لینک‌هایی را رنگ می‌کند که مرورگر فکر می‌کند قبلاً بازشان کرده‌اید. معمولاً فقط رنگ (و چند ویژگی محدود) را می‌شود عوض کرد. برای حریم خصوصی، روی عوض کردن padding یا چیدمان حساب نکنید.

بازدیدشده — رنگ ملایم لینک

css

CSS Code

a:visited {
color: #6b21a8;
}

ترتیب نوشتن وضعیت لینک

اگر چند وضعیت لینک را با هم می‌نویسید، ترتیب رایج امن این است: link → visited → hover → focus (گاهی LVHA). این ترتیب کمک می‌کند هاور و فوکوس روی لینک بازدیدشده هم دیده شوند.

اولین فرزند — `:first-child`

:first-child یعنی این عنصر اولین فرزند والدش است. «اولین li کل صفحه» نیست؛ اولین بین خواهر و برادرهای همان والد است.

اولین فرزند — آیتم اول فهرست پررنگ

css

CSS Code

li:first-child {
font-weight: 700;
}

قدم بعد: `:nth-child`

با :nth-child(odd) یا :nth-child(3) می‌توانید ردیف‌های راه‌راه یا «هر سومی» را بگیرید. اول :first-child را جا بیندازید؛ بعد سراغ این الگوها بروید.

عادت‌های خوب

سودوکلاس = یک دونقطه (:hover)؛ سودو‌المان = دو دونقطه (::) — جلسهٔ بعد
هاور تعاملی را همیشه با :focus واضح همراه کنید
رنگ visited را ملایم بگیرید
با Tab هم تست کنید، نه فقط با ماوس

خودتان امتحان کنید

یک صفحهٔ کوتاه با <button>، <input>، چند لینک و یک <ul> با سه <li> بسازید.
button:hover { background-color: #0f766e; color: #fff; } را بگذارید و ماوس را روی دکمه ببرید.
input:focus { outline: 2px solid #0f766e; } را اضافه کنید و با Tab وارد فیلد شوید.
a:visited { color: #6b21a8; } را بگذارید، لینکی را باز کنید و برگردید.
li:first-child { font-weight: 700; } را بزنید — فقط آیتم اول پررنگ شود.

اشتباهات رایج

نوشتن ::hover به‌جای :hover — دو دونقطه مال سودو‌المان است
هاور را استایل کردن و outline فوکوس را حذف کردن بدون جایگزین
انتظار آزادی کامل از :visited برای هر ویژگی
فکر کردن که p:first-child یعنی «اولین پاراگراف هرجا در صفحه»
گذاشتن متن مهم فقط داخل :hover تا کاربر لمسی هیچ‌وقت نبیندش

خلاصه

سودوکلاس با یک دونقطه، بر اساس وضعیت یا جایگاه انتخاب می‌کند
:hover و :focus بازخورد می‌دهند؛ هر دو را نگه دارید
:visited لینک بازشده را در حد مجاز مرورگر رنگ می‌کند
:first-child اولین فرزند والد را می‌گیرد؛ :nth-child قدم بعدی است
یک دونقطه = سودوکلاس؛ دو دونقطه = سودو‌المان
با ماوس، Tab و یک فهرست کوتاه تمرین کنید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان

سودوکلاس‌های CSS

اشتراک این آموزش

سودوکلاس یعنی چه؟

چند سودوکلاس پرکاربرد

📊 سودوکلاس‌های روزمرهٔ CSS

هاور — :hover

هاور — بازخورد دکمه

نکتهٔ هاور

فوکوس — :focus

فوکوس — حلقهٔ واضح روی input

هاور و فوکوس هر دو لازم‌اند

لینک بازدیدشده — :visited

بازدیدشده — رنگ ملایم لینک

ترتیب نوشتن وضعیت لینک

اولین فرزند — :first-child

اولین فرزند — آیتم اول فهرست پررنگ

قدم بعد: :nth-child

عادت‌های خوب

خودتان امتحان کنید

اشتباهات رایج

خلاصه

🧠 دانش خود را بیازمایید

دانش خود را بیازمایید

📝 دستورالعمل‌ها

🚧 دوره به زودی

Course Name

هنگام در دسترس بودن اطلاع دهید

اکنون در دسترس

Coming Soon

Course Name

هاور — `:hover`

فوکوس — `:focus`

لینک بازدیدشده — `:visited`

اولین فرزند — `:first-child`

قدم بعد: `:nth-child`