آموزش سلکتورهای شبه کلاس در CSS

 با استفاده از شبه کلاس ها( pseudo-class)، همه چیز در CSS جذاب می شود؛  به عنوان مثال، فرض کنید می خواهیم ردیف های(row) یک جدول را، یک در میان، رنگی کنیم؛ برای انجام این کار، می توانیم برای هر ردیفی که می خواهیم در جدول رنگی شود، کلاسی مثل class="even" بنویسیم و سپس با استفاده از CSS ردیف هایی که حاوی این کلاس هستند را به یک رنگ مشخص در بیاوریم. و یا اینکه می توانیم از یک سلکتور شبه کلاس(pseudo-class) یا از طریق ابزارهای مشابه، این کار را انجام دهیم.

 ترکیب شبه کلاس ها در CSS

CSS به ما امکان می دهد تا شبه عناصر را با یکدیگر ترکیب کنیم. بعنوان مثال، ما می توانیم لینک هایی که مشاهده نشده اند(unvisited) را، وقتی که ماوس بر روی عنصر می رود(hover) به رنگ قرمز در بیاوریم و لینک هایی که قبلاً مشاهده شده اند(visited) را وقتی ماوس بر روی آن لینک می رود(hover)، به رنگ قهوه ای مایل به زرد، یعنی maroon در بیاوریم:

a:link:hover {color: red;}
a:visited:hover {color: maroon;}

 ترتیب نوشتن این دستورات اهمیتی ندارد؛ یعنی ما، هم می توانیم بنویسیم a:hover:link یا می توانیم بنویسیم a:link:hover . همچنین این امکان نیز وجود دارد که برای لینک های unvisited و visited به زبان های مختلف، استایل های hover جداگانه ای مشخص کنیم، مثلا زبان آلمانی:

a:link:hover:lang(de) {color: gray;}
a:visited:hover:lang(de) {color: silver;}

مراقب باشید که شبه کلاس های دو به دو ناسازگار، را با یکدیگر ترکیب نکنید. بعنوان مثال، یک لینک نمی تواند هم به صورت visited و هم به صورت unvisited باشد؛ بنابراین دستور a:link:visited هیچ معنایی ندارد و چیزی را مورد تطابق قرار نمی دهد.