شبه کلاس‌هایCSS: افزودن سبک به عناصر در شرایط خاص

دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 12 بهمن 1399

کلاس های شبه CSS عناصر سبک را در حالت های خاص ، موقعیت ها ، با توجه به روابط والدین و کودک ، یا عناصر تحت تأثیر سایر شرایط خارجی ایجاد می کنند.

تعریف pseudo classes

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

ترکیب کلاس های pseudo با کلاس های CSS

ترکیب کلاس های pseudo با کلاس های CSS قدرتی خارق العاده به شما می دهد تا استایل های دقیق و ظریف را برای عناصر HTML در وب سایت خود ایجاد کنید. این تکنیک به شما امکان می دهد رفتار و ظاهر عناصر را در شرایط مختلف به طور کامل کنترل کنید.

کلاس های CSS: برای گروه بندی یا طبقه بندی عناصر HTML و اعمال استایل های کلی به آنها استفاده می شوند.
کلاس های pseudo: برای هدف قرار دادن عناصر بر اساس حالات یا رفتار آنها و اعمال استایل های خاص به آنها استفاده می شوند.

ترکیب این دو نوع کلاس به شما این امکان را می دهد که استایل های منحصر به فرد را برای شرایط خاص ایجاد کنید. فرض کنید می خواهید دکمه ای را طراحی کنید که در حالت عادی آبی باشد، در هنگام hover شدن خاکستری شود و در حالت فعال شدن قرمز شود. برای این کار می توانید از کد زیر استفاده کنید:

/* استایل پایه دکمه */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* استایل دکمه در حالت hover */
.button:hover {
  background-color: gray;
}

/* استایل دکمه در حالت فعال */
.button:active {
  background-color: red;
}

در این مثال، کلاس button به عنوان کلاس پایه برای دکمه عمل می کند و استایل های کلی مانند رنگ پس زمینه، رنگ متن، حاشیه و نوع نشانگر را به آن اعمال می کند.

سپس، از کلاس های pseudo :hover و :active برای استایل دهی به دکمه در حالت های خاص استفاده می شود.

ترتیب: ترتیب تعریف کلاس ها در CSS مهم است. کلاس های خاص باید بعد از کلاس های عمومی تعریف شوند تا اولویت داشته باشند.
اختصاص پذیری: اگر یک عنصر همزمان با چند کلاس pseudo مطابقت داشته باشد، کلاسی که در انتهای لیست تعریف شده است اولویت خواهد داشت.
عدم تداخل: توجه داشته باشید که برخی از pseudo class ها با یکدیگر تداخل دارند. به عنوان مثال، :hover و :active هر دو بر روی دکمه ها اعمال می شوند، اما :active در نهایت اولویت خواهد داشت.

سبک دهی پیوندها در حالات خاص با CSS

برای استایل دهی پیوندها در حالات خاص در CSS می توانید از ترکیب کلاس های CSS با شبه کلاس ها استفاده کنید.

در اینجا چند نمونه از نحوه انجام این کار آورده شده است:

Definition	Pseudo class
پیوندی را که هنوز باز نشده است مشخص می کند. این فقط پیوندها را با ویژگی href تطبیق می‌دهد.	link:
می‌توانید از شبه کلاس `:visited` برای استایل دهی به پیوندهایی که قبلاً توسط کاربر بازدید شده اند استفاده کنید.	visited:
می‌توانید از شبه کلاس `:hover` برای استایل دهی به پیوندهایی که ماوس روی آنها قرار دارد استفاده کنید.	hover:
می‌توانید از شبه کلاس `:active` برای استایل دهی به پیوندهایی که در حال حاضر توسط کاربر فعال هستند (کلیک شده اند) استفاده کنید.	active:

مثال زیر هر چهار کلاس شبه را به عنصر <a> اختصاص می دهد:

/* استایل پایه برای همه پیوندها */
a {
  color: #333;
  text-decoration: none;
}

/* استایل برای پیوندهای بازدید شده */
a:visited {
  color: #888;
}

/* استایل برای پیوندهای فعال */
a:active {
  color: #007bff;
}

/* استایل برای پیوندها در حالت hover */
a:hover {
  color: #0056b3;
}

Description	Selector
پیوند فعال را انتخاب کنید	active:
عناصر انتخاب شده را انتخاب کنید	checked:
عناصر غیرفعال شده را انتخاب کنید	disabled:
عناصری را انتخاب کنید که فرزندی ندارند	empty:
عناصری را که فعال هستند انتخاب کنید	enabled:
عناصری را انتخاب کنید که اولین فرزندان والدینشان باشند	first-child:
عناصری را انتخاب کنید که اولین عناصر مشخص شده والدین آنها هستند	first-of-type:
عناصر متمرکز را انتخاب کنید	focus:
پیوند را روی ماوس انتخاب می کند	hover:
عناصری را انتخاب می کند که دارای مقداری در یک محدوده مشخص شده باشند	in-range:
عناصری را انتخاب می کند که مقدار نامعتبری دارند	invalid:
عناصری را انتخاب می کند که مقدار صفت lang آنها با شروع شروع می شود	(lang(language:
عناصری را انتخاب می کند که آخرین فرزندان والدینشان هستند	last-child:
عناصری را انتخاب می کند که آخرین عناصر مشخص شده والدین آنها هستند	last-of-type:
هر پیوند بازدید نشده را انتخاب می کند	link:
عناصری را انتخاب می کند که با انتخابگرها مطابقت ندارند	(not(selector:
عناصر را با توجه به موقعیت آنها در گروهی از خواهر و برادرها انتخاب کنید	(nth-child(n:
عناصر را با توجه به موقعیت آنها در گروهی از خواهران و برادرها انتخاب می کند (از انتها می شمارد)	(nth-last-child(n:
عناصر یک نوع مشخص را با توجه به موقعیت آنها در گروهی از خواهران و برادرها انتخاب می کند (با شمارش از انتها)	(nth-last-of-type(n:
عناصر یک نوع مشخص را با توجه به موقعیت آنها در گروهی از خواهران و برادرها انتخاب می کند (با شمارش از انتها)	(nth-of-type(n:
عناصری را انتخاب می کند که هیچ خواهر و برادری با همان نوع ندارند	only-of-type:
عناصری را انتخاب می کند که تنها فرزندان والدینشان باشند	only-child:
عناصری را انتخاب می کند که ویژگی لازم را ندارند	optional:
عناصری را انتخاب می کند که مقادیر بزرگتری از آنچه در محدوده مشخص شده اند داشته باشند	out-of-range:
عناصری را که دارای ویژگی فقط خواندنی هستند انتخاب می کند	read-only:
عناصری را انتخاب می کند که ویژگی فقط خواندنی ندارند	read-write:
عناصری را که دارای ویژگی مورد نیاز هستند انتخاب می کند	required:
عناصر اصلی یک پرونده را انتخاب می کند	root:
عنصر فعال فعلی (به عنوان مثال ، یک URL حاوی آن نام لنگر) را انتخاب می کند	target:
همه عناصر دارای مقدار معتبر را انتخاب می کند	valid:
هر پیوند بازدید شده را انتخاب می کند	visited:

نکات مهم شبه کلاس های CSS:

عناصر شبه بخش خاصی از عناصر HTML را سبک می کنند. به عنوان مثال ، می توانید با استفاده از :: حرف اول ، به حرف های اول یک پاراگراف سبک اضافه کنید.
می توانید از کلاس ها و عناصر شبه همراه با انتخابگرهای jQuery استفاده کنید. در واقع ، jQuery چند مورد دیگر را نیز ارائه می دهد.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊