شبه طبقه

شبه طبقه

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

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

شما این کار را با استفاده از یک سری از چهار قانون سبک شبه کلاس انجام میدهید:

1- لینک: قانون را برای یک پیوند عادی و بازدید نشده اعمال می کند.

2- ویزیتد (visited) : این قانون را برای پیوندی که بازدیدکننده سایت قبلاً بازدید کرده است اعمال می کند.

3- هاور (hover) :  زمانی که بازدیدکننده سایت نشانگر ماوس را بر روی لینک قرار می دهد، این قانون را اعمال می کند

»»اکتیو (active): زمانی که بازدیدکننده سایت با کلیک ماوس روی پیوند، قانون را اعمال می کند.

در تعریف قاعده:

a: link {color: orange;}

a: visited {color: purple;}

a: hover {color: green;}

a: active {color: red;}

همه این قوانین شبه کلاس برای همه عناصر لنگر در صفحه وب و بسته به وضعیت هایپرلینک، رنگ های مختلفی را به متن هایپرلینک اعمال کنید.

فهرست کردن قوانین شبه کلاس عنصر لنگر در آن بسیار مهم است سفارش در اینجا نشان داده شده است، یا آنها کار نمی کنند!

اگر می‌خواهید زیرخط‌هایی را که بیشتر مرورگرها روی پیوندهای فرامتن اعمال می‌کنند حذف کنید، ویژگی زیر را به قانون سبک شبه عنصر اضافه کنید:

text-decoration:none;

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

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

در CSS3 بسیاری از قوانین سبک شبه کلاسی (مانند فرزند اول و آخرین فرزند) با مکان یک عنصر در مدل شیء سند (DOM) کار کنید.

1- این قانون برای پیوندهای فرامتن اعمال می شود در حالی که بازدیدکننده سایت روی آنها کلیک می کند.   =   Active

2- این قانون برای چک باکس های ورودی و گزینه های رادیویی انتخاب شده اعمال می شود(بررسی شد).   =   Cheched

3- این قانون برای عناصر ورودی غیرفعال اعمال می شود.   =   Disabled

4- این قانون در مورد عناصری که فرزند ندارند اعمال می شود.   =   Empty

5- این قانون برای عناصر ورودی که فعال هستند اعمال می شود.   =   Enabled

6- این قانون برای اولین عنصر فرزند یک عنصر والد اعمال می شود.   =   First-child

7- این قانون برای اولین عنصر فرزند از همان نوع والد اعمال می شود.   =   First-of-type

8- این قانون برای عناصری اعمال می شود که تمرکز مرورگر را دارند.   =   focus

9- این قانون برای عناصری که نشانگر ماوس روی آنها قرار دارد اعمال می شود.   =   Hover

10- این قانون برای عناصری که مقدار آنها در محدوده مشخص شده است اعمال می شود.   =   In-range

11- این قانون برای عناصری که مقدار آنها نامعتبر است اعمال می شود.   =   Invalid

12- این قانون برای عناصری با ویژگی lang مشخص شده اعمال می شود.   =   Lang

13- این قانون برای آخرین عنصر فرزند یک عنصر والد اعمال می شود.   =   Last-child

14- این قانون برای آخرین عنصر فرزند از همان نوع والد اعمال می شود.   =   Last-of-type

15- این قانون برای عناصر پیوند فرامتن بازدید نشده اعمال می شود.   =   Link

16- این قانون برای همه عناصر به جز عناصر انتخابگر مشخص شده اعمال می شود.   =   Not

17- این قانون برای فرزند n عنصر والد اعمال می شود.   =   Nth-child

18- این قانون برای فرزند n عنصر والد که از آن به عقب شمارش می شود، اعمال می شود آخرین عنصر   =   Nth-last-child

19- این قانون برای عنصر فرزند n با همان نوع والد اعمال می شود.   =   Nth-of-type

20- این قانون برای هر عنصری که تنها عنصر از همان نوع است اعمال می شودوالدین.   =   Only-of-type

21 – این قانون در مورد هر عنصری که همان تنها فرزند والدین است اعمال می شود.   =   Only-child

22- این قانون برای عناصر ورودی که ویژگی لازم را ندارند اعمال می شود.   =   Optional

23 – این قانون برای عناصر با مقدار خارج از محدوده مشخص اعمال می شود   =   Out-of-range

24- این قانون برای عناصری اعمال می شود که یک ویژگی فقط خواندنی مشخص شده است.   =   Read-only