شبه کلاس‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

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

شیوه نوشتار

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

1 selector:pseudo-class {
2   property:value;
3 }


شبه کلاس Anchor

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

مثال
 1 /* unvisited link */
 2 a:link {
 3   color: #FF0000;
 4 }
 5 
 6 /* visited link */
 7 a:visited {
 8   color: #00FF00;
 9 }
10 
11 /* mouse over link */
12 a:hover {
13   color: #FF00FF;
14 }
15 
16 /* selected link */
17 a:active {
18   color: #0000FF;
19 }


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

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

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

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

مثال
1 a.highlight:hover {
2   color: #ff0000;
3 }


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

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

مثال
1 div:hover {
2   background-color: blue;
3 }


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

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

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

مثال
1 p {
2   display: none;
3   background-color: yellow;
4   padding: 20px;
5 }
6 
7 div:hover p {
8   display: block;
9 }


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

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

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

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

مثال
1 p:first-child {
2   color: blue;
3 }


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

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

مثال
1 p i:first-child {
2   color: blue;
3 }


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

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

مثال
1 p:first-child i {
2   color: blue;
3 }


CSS - شبه کلاس :lang

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

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

مثال
 1 <head>
 2 <style>
 3 q:lang(no) {
 4   quotes: "~" "~";
 5 }
 6 </style>
 7 </head>
 8 <body>
 9 
10 <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
11 
12 </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:شبه_کلاس‌ها&oldid=11199»