شبه کلاس‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial(تغییرمسیر از CSS:شبه کلاس‌ها)
پرش به ناوبری پرش به جستجو

شبه کلاسها چه چیزی هستند؟

یک شبه کلاس برای تعریف وضعیت ویژه یک عنصر تعریف می‌شود.[۱]

برای مثال، می‌توان برای انجام موارد زیر از شبه کلاس استفاده کرد:

  • استایل دهی یک عنصر برای زمانی که نشانه‌گر موس روی آن قرار می‌گیرد
  • استایل دهی متفاوت لینک‌های بازدید شده و بازدید نشده
  • استایل دیک عنصر هنگامی که انتخاب می‌شود

شیوه نوشتار

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

selector:pseudo-class {
  property:value;
}


شبه کلاس Anchor

لینک‌ها را می‌توان به شیوه‌های گوناگون نمایش داد:

مثال 

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}


نکته: a:hover می‌بایست بعد از تعریف a:link و a:visited نوشته شود تا اثر بخش باشد! تعریف a:hover می‌بایست بعد a:active باشد تا اثر بخش باشد! نام شبه کلاسها حساس به حروف کوچک و بزرگ نیستند.

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

شبه کلاسها می‌توانند با کلاسهای CSS ترکیب شوند:

زمانی که شما نشانه‌گر موس خود را روی لینک مثال زیر قرار می‌دهید، رنگ لینک را تغییر خواهد داد:

مثال 

a.highlight:hover {
  color: #ff0000;
}


قرار دادن نشانه‌گر موس (Hover) روی <div>

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

مثال 

div:hover {
  background-color: blue;
}


Tooltip ساده در هنگام قرارگیری موس روی کنترل

قرار دادن نشانه‌گر موس روی یک عنصر برای نمایش یک عنصر <p> (مانند یک tooltip):

نشانه‌گر موس را روی من ببرید تا عنصر <p> را نمایش دهم. Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

مثال 

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

div:hover p {
  display: block;
}


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

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

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

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

مثال 

p:first-child {
  color: blue;
}


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

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

مثال 

p i:first-child {
  color: blue;
}


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

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

مثال 

p:first-child i {
  color: blue;
}


CSS - شبه کلاس :lang

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

در مثال زیر، :lang علامت نقل قول " " را برای عناصر <q> با مقدار ویژگی lang=”no” تعریف می‌کند:

مثال 

<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>


مثال‌های بیشتر

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

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

استفاده :focus

این مثال نحوه استفاده از شبه کلاس :focus را نمایش می‌دهد.

خود را با تمرینها امتحان کنید!

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

انتخابگر مثال توضیح مثال
:active a:active لینک‌های فعال را انتخاب می‌کند
:checked input:checked هر عنصر <input> علامت‌دار (Checked) را انتخاب می‌کند
:disabled input:disabled هر عنصر <input> غیرفعال را انتخاب می‌کند
:empty p:empty هر عنصر <p> که هیچ فرزندی ندارد را انتخاب می‌کند
:enabled input:enabled هر عنصر <input> فعال شده را انتخاب می‌کند
:first-child p:first-child هر عنصر <p> را که اولین فرزند والد خود است را ، انتخاب می‌کند
:first-of-type p:first-of-t هر عنصر <p> که اولین عنصر <p> والد خود است را انتخاب می‌کند
:focus input:focus عنصر <input> را که انتخاب شده (focus دارد) ، انتخاب می‌کند
:hover a:hover لینک‌ها را در زمانی که نشانه‌گر موس روی آنها قرار می‌گیرد را انتخاب می‌کند
:in-range input:in-range عناصر <input> با مقداری که در محدوده به خصوص هستند را انتخاب می‌کند
:invalid input:invalid تمام عناصر <input> را که مقداری نامعتبر دارند را انتخاب می‌کند
: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 عنصر ریشه سند را انتخاب می‌کند
:target #news:target عنصر #news فعال جاری را انتخاب می‌کند (کلیک بر روی یک url که حاوی نام anchor است)
:valid input:valid تمامی عناصر <input> را که مقدار معتبر دارند انتخاب می‌کند
:visited a:visited تمامی لینک‌های بازدید شده را انتخاب می‌کند

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

انتخابگر مثال توضیح مثال
::after p::after محتوا را بعد از هر عنصر <p> وارد می‌کند
::before p::before محتوا را قبل از هر عنصر <p> وارد می‌کند
::first-letter p::first-letter اولین حرف از هرعنصر <p> را انتخاب می‌کند
::first-line p::first-line اولین خط هر عنصر <p> را انتخاب می‌کند
::selection p::selection بخشی از عنصری که کاربر توسط کاربر انتخاب می‌شود را انتخاب می‌کند


منابع آموزشی

  1. ↑ w3schools.com: CSS Pseudo-classes



برگرفته از «https://wikicod.ir/w/index.php?title=CSS:Tutorial/شبه_کلاس_ها&oldid=23828»