در این قسمت از فیلم آموزش CSS مبحث شبه کلاس ها ( Pseudo Class ) آموزش داده شده است که کاربرد زیادی در CSS دارد و بهتون توصیه می کنم شبه کلاس رو کامل یاد بگیرید ، دانلود فیلم آموزش CSS را می توانید از انتهای پست انجام دهید .
شبه کلاس ( Pseudo Class ) در CSS :
با استفاده از این شبه کلاس ها می تونیم یه سری افکت یا جلوه های خاصی به انتخابگر هایی که داریم بدیم .
سینتکس شبه کلاس ها در CSS به صورت زیر است :
selector:pseudo-class{
}
در اولین قدم با نحوه استایل دادن به لینک ها توسط شبه کلاس ها آشنا می شوید .
link:
با استفاده از این شبه کلاس می توانیم به حالت عادی یک لینک استایل بدیم که به صورت زیر استفاده می شود :
کد CSS :
a:link{
padding: 10px;
color: orange;
}
کد HTML :
<!Doctype html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <a href="#">طراحی سایت</a> </body> </html>
visited:
از این شبه کلاس برای زمانی استفاده می شود کاربر روی لینک کلیک کرده است و به یک صفحه دیگر رفته و دوباره به این صفحه بازگشته است ، به زبان ساده به کاربر میگه که قبلاً روی این لینک کلیک کردی .
a:visited{
padding: 10px;
color: green;
}
hover:
از این شبه کلاس زمانی استفاده می کنیم که موس بر روی لینک ها یا انتخابگر می رود .
a:hover{
background-color: yellow;
font-size:18px;
padding: 10px;
color: green;
}
active:
از این شبه کلاس زمانی استفاده می شود که کاربر بر روی لینک یا انتخابگر مورد نظر ما کلیک می کند ، اگر بر روی لینک کلیک کنید و آن نگه دارید به این موضوع پی می برید .
a:active{
background-color: blue;
font-size:18px;
padding: 10px;
color: white;
}
نکته : به این نکات زیر توجه کنید تا با مشکل مواجه نشید :
شبه کلاس hover باید بعد از link و visited نوشته شود چون اگر این سلسه مراتب را رعایت نکنید شبه کد hover اعمال نمی شود .
active را باید بعد از شبه کلاس hover بنویسید و آخرین نکته هم این که شبه کلاس ها نسبت به حروف بزرگ و کوچک حساس نیستند .
شبه کلاس first-child در CSS :
این شبه کلاس میگه که به اولین فرزند استایل بده یعنی هر عنصر یا انتخابگری را که انتخاب کنید اگر اولین فرزند پدرش باشد به آن استایل را می دهد وگرنه استایل داده نمی شود .
i:first-child{
color: blue;
font-size: 30px;
}
کد HTML :
<!Doctype html> <head> <title>Web30ty</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p> <i>Web30ty</i> <i>Hello World!!!</i> </p> </body> </html>
شبه کلاس lang:
از این شبه کلاس استفاده می کنیم تا قوانین ویژه ای رو به زبان های مختلف بتونیم تعریف کنیم .
می تونید نحوه استفاده از lang را در دانلود فیلم آموزش CSS مشاهده کنید .
focus:
از این برای استایل دادن به کادر در فرم ها استفاده می شود یعنی وقتی که کاربر روی کادر کلیک کرد استایل های داخل focus اعمال میشه .
input:focus{
padding:10px;
background-color:yellow;
color: red;
}
کد HTML :
<form action="#" method="post"> <input type="text" name="text"> </form>
only-of-type:
این میگه که اگر انتخابگر یا عنصر مورد نظر ما تنها عنصر پدرش بود این استایل رو بهش بده .
p:only-of-type{
padding: 10px;
background: yellow;
color: red;
}
بقیه شبه کلاس ها را هم که زیاد اسفاده نمی شوند را می توانید با سرچ کردن پیدا کنید .
