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

این کار با استفاده از شبه‌کلاس‌ها (Pseudo-Classes) و شبه‌عناصر (Pseudo-Elements) انجام می‌شود. در این مقاله، تفاوت این دو مفهوم را بررسی می‌کنیم و نحوه استفاده از آن‌ها را توضیح خواهیم داد.

۱. شبه‌کلاس (Pseudo-Class) چیست؟

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

✅ ویژگی‌های شبه‌کلاس‌ها:

• با یک : (دونقطه) قبل از نامشان نوشته می‌شوند.
• بسته به تعامل کاربر یا موقعیت عنصر، استایل را تغییر می‌دهند.
• مثال: :hover, :focus, :nth-child(), :checked

✅ مثال‌های کاربردی شبه‌کلاس‌ها

۱. تغییر استایل در هنگام قرارگیری ماوس (:hover)

button:hover {
    background-color: blue;
    color: white;
}

🔹 نتیجه: هنگام قرار گرفتن ماوس روی دکمه، رنگ پس‌زمینه آبی و متن سفید می‌شود.

۲. استایل‌دهی به یک عنصر وقتی در حالت فوکوس است (:focus)

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

🔹 نتیجه: هنگامی که کاربر داخل فیلد کلیک یا تایپ کند، حاشیه آن سبز می‌شود.

۳. استایل‌دهی به یک عنصر خاص در یک لیست (:nth-child())

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

🔹 نتیجه: دومین آیتم لیست قرمز می‌شود.

۴. تغییر استایل چک‌باکس انتخاب‌شده (:checked)

input[type="checkbox"]:checked {
    accent-color: red;
}

🔹 نتیجه: وقتی چک‌باکس انتخاب شود، رنگ آن قرمز می‌شود.

۲. شبه‌عنصر (Pseudo-Element) چیست؟

شبه‌عناصر بخش خاصی از یک عنصر را هدف قرار می‌دهند یا محتوای مجازی به آن اضافه می‌کنند بدون اینکه تغییری در HTML ایجاد شود.

✅ ویژگی‌های شبه‌عناصر:

• با :: (دو دونقطه) نوشته می‌شوند.
• امکان اضافه کردن یا تغییر بخشی از محتوای یک عنصر را بدون ویرایش HTML فراهم می‌کنند.
• مثال: ::before, ::after, ::first-letter, ::first-line

✅ مثال‌های کاربردی شبه‌عناصر

۱. اضافه کردن یک نماد یا متن قبل از یک عنصر (::before)

h1::before {
    content: "🔥 ";
}

🔹 نتیجه: قبل از هر <h1> یک ایموجی آتش 🔥 اضافه می‌شود.

۲. اضافه کردن یک متن بعد از یک عنصر (::after)

a::after {
    content: " 🔗";
}

🔹 نتیجه: پس از تمام لینک‌ها (<a>)، یک ایموجی لینک 🔗 نمایش داده می‌شود.

۳. تغییر استایل اولین حرف یک پاراگراف (::first-letter)

p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: red;
}

🔹 نتیجه: اولین حرف پاراگراف بزرگ، قرمز و پررنگ خواهد شد.

۴. تغییر استایل اولین خط یک پاراگراف (::first-line)

p::first-line {
    font-weight: bold;
    color: blue;
}

🔹 نتیجه: فقط اولین خط پاراگراف آبی و پررنگ می‌شود.

۳. تفاوت اصلی بین شبه‌کلاس و شبه‌عنصر

۴. ترکیب شبه‌کلاس‌ها و شبه‌عناصر برای استایل‌دهی پیشرفته

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

✅ مثال: تغییر استایل محتوای مجازی هنگام قرارگیری ماوس

button::after {
    content: " ⏩";
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

button:hover::after {
    opacity: 1;
}

🔹 نتیجه: هنگام قرار گرفتن ماوس روی دکمه، نماد ⏩ کم‌کم ظاهر می‌شود.

۵. نتیجه‌گیری

✅ شبه‌کلاس‌ها برای تغییر حالت عناصر بدون نیاز به کلاس یا ID اضافی استفاده می‌شوند.
✅ شبه‌عناصر برای استایل‌دهی بخش خاصی از عناصر یا اضافه کردن محتوا بدون تغییر در HTML به کار می‌روند.
✅ ترکیب این دو تکنیک به ما امکان می‌دهد که استایل‌های داینامیک و خلاقانه‌ای در طراحی وب ایجاد کنیم.