آموزش شبه کلاس ها(pseudo-class) در CSS

Ratings
(0)

 

شبه کلاس ها(Pseudo-class) چه هستند؟

از یک شبه کلاس(pseudo-class)  برای تعریف یک حالت خاص برای یک عنصر استفاده می شود. بعنوان مثال، از شبه کلاس برای کارهای استفاده می شود:

1. استایل دادن به یک عنصر، وقتی که یک کاربر ماوس روی روی آن می برد.

2. استایل دادن به لینک های ویزیت شده یا ویزیت نشده، به طور متفاوت.

3. استایل دادن به یک عنصر، وقتی که فوکوس را دریافت می کند.

ماوس را روی این عنصر بیاورید

شیوه ی نوشتاری یا سینتکس

شیوه ی نوشتاری یا سینتکس شبه کلاس ها به صورت زیر است:

selector:pseudo-class {
  property: value;
}

شبه کلاس های لینک ها

لینک ها می توانند به روش های مختلفی نمایش یابند:

مثال شماره 1

 /* لینک ویزیت نشده */
a:link {
  color: #FF0000;
}

/* لینک ویزیت شده */
a:visited {
  color: #00FF00;
}

/* رفتن ماوس روی لینک */
a:hover {
  color: #FF00FF;
}

/* لینک وقتی انتخاب(کلیک) شده است */
a:active {
  color: #0000FF;
}
امتحان کنید

نکته: دستور a:hover باید پس از دستور a:link و a:visited در کدهای CSS قرار گیرد تا تاثیر داشته باشد. دستور a:active باید پس از a:hover در کدهای CSS قرار گیرد تا تاثیرگذار باشد. نام شبه کلاس ها به حروف بزرگ و کوچک حساس نیست.

شبه کلاس ها و کلاس های HTML

ما می توانیم شبه کلاس ها را با کلاس های HTML ترکیب کنیم. در مثال زیر، وقتی که ماوس را روی لینک می بریم(hover می کنیم)، رنگ آن عوض می شود:

مثال شماره 2

a.highlight:hover {
  color: #ff0000;
}
امتحان کنید

استفاده از hover روی یک <div>

در مثال زیر، از شبه کلاس hover: روی یک عنصر <div> استفاده شده است:

مثال شماره 3

div:hover {
  background-color: blue;
}
امتحان کنید

ایجاد یک پیغام(Tooltip) با استفاده از hover

ماوس را روی عنصر <div> زیر ببرید تا یک عنصر <p> (مانند یک tooltip) نمایش داده شود:

ماوس را اینجا بیاورید تا یک عنصر <p> نمایش داده شود.

به این آموزشگاه خوش آمدید

مثال شماره 4

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
امتحان کنید

بررسی شبه کلاس first-child: در CSS

شبه کلاس first-child: یک عنصر مشخص که اولین فرزند یک عنصر دیگر است را مورد تطابق قرار می دهد.

مورد تطابق قرار دادن اولین عنصر <p>

در مثال زیر، سلکتور ما ،هر عنصر <p> که اولین فرزندِ هر عنصر دیگری است، را مورد تطابق قرار می دهد:

مثال شماره 5

p:first-child {
  color: blue;
}
امتحان کنید

مورد تطابق قرار دادن اولین عنصر <i> در تمام عناصر <p>

در مثال زیر، سلکتور، اولین عنصر <i> در تمام عناصر <p> را مورد تطابق قرار می دهد:

مثال شماره 6

p i:first-child {
  color: blue;
}
امتحان کنید

انتخاب تمام عناصر <i> در تمام عناصر <p>، که اولین عنصر (first-child) هستند

در مثال زیر، سلکتور ما تمام عناصر <i> در عناصر <p>، که اولین فرزند از یک عنصر دیگر هستند را انتخاب می کند:

مثال شماره 7

p:first-child i {
  color: blue;
}
امتحان کنید

بررسی شبه کلاس lang: در CSS

شبه کلاس lang: به ما امکان می دهد تا دستورات خاصی را برای زبان های مختلف تعریف کنیم. در مثال زیر، دستور lang: علامت های نقل قول را برای عناصر <q> که حاوی lang="no" هستند، تعریف می کند:

مثال شماره 8

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>مقداری متن <q lang="no">یک نقل قول در یک پاراگراف</q> مقداری متن.</p>
<p>در مثال زیر، دستور lang: علامت های نقل قول را برای عناصر q که حاوی lang="no" هستند، تعریف می کند</p>

</body>
</html>
امتحان کنید

یک مثال دیگر

اضافه کردن استایل های مختلف به لینک ها

این مثال نشان می دهد که چگونه می توان دیگر استایل ها را به لینک ها اضافه کرد.

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

سلکتور مثال توضیح مثال
:active a:active

لینک را وقتی که دکمه ماوس روی آن فشار داده می شود، انتخاب می کند.
:checked input:checked

هر عنصر <input> که چک خورده است را انتخاب می کند.
:disabled input:disabled

هر عنصر <input> که غیرفعال(disabled) شده است را انتخاب می کند.
:empty p:empty

هر عنصر <p> که خالی است را انتخاب می کند.
:enabled input:enabled

هر عنصر <input> که فعال است را انتخاب می کند.
:first-child p:first-child

هر عنصر <p> که اولین فرزند والد خود است را انتخاب می کند.
:first-of-type p:first-of-type

هر عنصر <p> که اولین عنصر <p> در والدش است را انتخاب می کند.
:focus input:focus

عنصر <input> که فوکوس دارد را انتخاب می کند.
:hover a:hover

عناصری که ماوس روی آنها رفته است را انتخاب می کند.
:in-range input:in-range

عناصر <input> که حاوی یک مقدار، بین یک محدوده ی خاص هستند را انتخاب می کند.
:invalid input:invalid

تمام عناصر <input> که یک مقدار نامعتبر(invalid) دارند را انتخاب می کند.
:lang(language) p:lang(it)

هر عنصر <p> که یک خاصیت lang دارد که مقدار آن با "it" شروع می شود.
:last-child p:last-child

هر عنصر <p> که آخرین فرزند از والد خود است را انتخاب می کند.
:last-of-type p:last-of-type

هر عنصر <p> که آخرین عنصر <p> در والد خود است را انتخاب می کند.
:link a:link

تمام لینک هایی که ویزیت نشده اند را انتخاب می کند.
:not(selector) :not(p)

هر عنصری که یک <p> نیست را انتخاب می کند.
:nth-child(n) p:nth-child(2)

هر عنصر <p> که دومین فرزند از والدش است را انتخاب می کند.
:nth-last-child(n) p:nth-last-child(2)

هر عنصر <p> که دومین فرزند از والدش، با شمارش از آخرین فرزند است را انتخاب می کند.
:nth-last-of-type(n) p:nth-last-of-type(2)

هر عنصر <p> که دومین عنصر <p> از والدش است را با شمارش از آخرین فرزند، انتخاب می کند.
:nth-of-type(n) p:nth-of-type(2)

هر عنصر <p> که دومین عنصر <p> از والدش است را انتخاب می کند.
:only-of-type p:only-of-type

هر عنصر <p> که تنها عنصر <p> در والدش است را انتخاب می کند.
:only-child p:only-child

هر عنصر <p> که تنها فزند از والدش است را انتخاب می کند.
:optional input:optional

عناصر <input> که خصوصیت required ندارند را انتخاب می کند.
:out-of-range input:out-of-range

عناصر <input> که یک مقدار، بیرون از یک محدوده ی خاص دارند را انتخاب می کند.
:read-only input:read-only

عناصر <input> که یک خصوصیت readonly دارند را انتخاب می کند.
:read-write input:read-write

عناصر <input> که خصوصیت readonly ندارند را انتخاب می کند.
:required input:required

عناصر <input> که یک خصوصیت required دارند را انتخاب می کند.
:root root

عنصر ریشه ی(root) سند را انتخاب می کند.
:target news:target#

عنصر فعلی فعال news# را انتخاب می کند.
:valid input:valid

تمام عناصر <input> که یک مقدار معتبر(valid) دارند را انتخاب می کند.
:visited a:visited

تمام لینک های ویزیت شده را انتخاب می کند.

 

لیست تمام شبه عناصر CSS

سلکتور مثال توضیح مثال
::after p::after

 اضافه کردن محتوا، پس از هر عنصر <p>
::before p::before

اضافه کردن محتوا قبل از هر عنصر <p>
::first-letter p::first-letter

انتخاب حرف اول از هر عنصر <p>
::first-line p::first-line

انتخاب اولین خط از هر عنصر <p>
::marker ::marker

علامت های آیتم های لیست را انتخاب می کند.
::selection p::selection

بخشی از یک عنص که توسط یک کاربر انتخاب شده است را انتخاب می کند.

 

  • بازدید: 212

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال