ModuleTrick 🔢

توی این اپیزود قراره روش جدیدی برای استایل دهی به المنت های مشابه داخل یک والد و یاد بگیریم⚡️

#ModuleTrick #css
@CodeModule

انواع Pseudo class ها در css3 🔵

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

توی این پست چند تا از سودو کلاس های پر کاربرد و خفن رو برسی میکنیم.

1️⃣شبه کلاس invalid:

با استفاده از شبه کلاس invalid تو CSS میتونین برای عناصری که دارای مقدار نامعتبر (invalid) هستند، استایل دلخواه تعریف کنین.

input[type="email"]:invalid {
 border: 2px solid black;
 background-color:red;
 color:#fff;
}

2️⃣شبه کلاس first-child:

شبه کلاس first-child به شما این اجازه رو میده تا اولین فرزند هر پرنت رو بهش استایل بدید.

body p: first-child {
/*Write css codes*/
}

3️⃣شبه کلاس last-child:

برای مثال استفاده در تگ P ( یعنی تمامی تگ های P که آخرین فرزند از تگ والد ( پدرشون ) هستن رو انتخاب میکنه )

body p:last-child {
background-color:#1d7ce7;
color:#fff;
padding:5px;
}

4️⃣شبه کلاس nth-child:

می‌تونین به عنوان پارامتر، شماره اون فرزند رو وارد کنید و یا میتونین با استفاده از کلمات کلیدی ( odd یعنی فرد و even یعنی زوج ) معمولا و بیشتر در جدول ها استفاده میشه. ( مثلا گفتیم سطرهای فرد فلان رنگ زمینه و سطرهای زوج بهمان رنگ )

li:nth-child(3) {
 background-color:#e30730;
}

/* For odd tr */
table tr:nth-child(odd){
background-color:#f2f2f2;
}
 
/* For even tr */
table tr:nth-child(even){
background-color:#8AC007;
color:#fff;
}

5️⃣شبه کلاس not:

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

p:not(.free) {
background-color:green;
color:white;
text-align:center;
}

6️⃣شبه کلاس disable:

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

button:disabled {
background-color:red;
color: white;
}

شبه کلاس های زیادی وجود داره که هر کدوم رو نسبت به نیازمون میتونیم استفاده کنیم. ما توی این پست قصد داشتیم چند تا از پر کاربرد و جالب ترینشون رو بهتون معرفی کنیم. امیدوارم لذت برده باشید 😎

#css #styling
@CodeModule