این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کامل شبه کلاس ها در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل شبه کلاس ها در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش کامل شبه کلاس ها در CSS
شبه کلاس ها یا به انگلیسی Pseudo Class در CSS در واقع نوع دیگری از انتخابگرها هستن که برای تعریف یک حالت خاص از یک تگ می باشد، این حالت خاص که میگم مثلا موقع رفتن ماوس بروی یک تگ ، یا مثلا موقع فوکوس کردن بروی یک تگ و…
شبه کلاس ها میتونن موارد زیر باشند :
- وقتی ماوس میره روی تگ
- موقع فوکوس کردن بروی یک تگ
- برای انتخاب فرزند خاصی از یک تگ
- برای تعریف استایل برای لینک های درون یک صفحه
- و … ( در ادامه میتونید لیست کاملشونو ببینید )
Free-Learn
شکل کلی استفاده از شبه کلاس در CSS
ما برای استفاده از شبه کلاس ها در یک صفحه وب باید بصورت زیر عمل نماییم :
|
1 2 3 |
Selector:Pseudo-Class { دستورات سی اس اس در اینجا } |
که Selector میشه همون انتخابگر ما بعدش یه : میزاریم و بعدش شبه کلاس رو مینویسیم و در نهایت ویژگی های CSS مورد نظرمون رو وارد مینماییم.
مثال : داریم میگیم وقتی ماوس رفت روی تگ P رنگ زمینه عوض شه
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> /* در حالت عادی */ p{ background-color:#123456; color:#fff; padding:10px; text-align:center; } /* وقتی ماوس میره روش */ p:hover{ background-color:orange; color:#fff; } </style> |
اگه توجه کرده باشید شبه عناصر :: دارند ولی شبه کلاس ها : دارند، این در واقع برای متمایز کردن شبه کلاس ها با شبه عناصر می باشد.
از شبه کلاس ها نمیتوان درون صفت Style بصورت استایل درون تگی / خطی استفاده کرد.
Free-Learn
لیست کامل شبه کلاس های CSS
| شبه کلاس | توضیح | مثال |
|---|---|---|
| active: | لحظه کلیک بروی یک عنصر ( لینک یا دیگر عناصر ) را مشخص میکند | مثال |
| focus: | لحظه فوکوس ( کلیک شدن ) روی تگ | مثال |
| hover: | وقتی ماوس میره روی یک تگ | مثال |
| link: | انتخاب لینک هایی که هنوز روشون کلیک نشده ( بازدید نشده ) | مثال |
| visited: | انتخاب لینک هایی که روشون کلیک شده ( بازدید شده ) | مثال |
| checked: | انتخاب عناصری که تیک خورده اند ( یا قراره توسط کاربر تیک بخورند ) | مثال |
| default: | انتخاب عناصری که دارای مقدار پیش فرض می باشند | مثال |
| disabled: | انتخاب عناصری که غیرفعال می باشند | مثال |
| enabled: | انتخاب عناصری که فعال می باشند | مثال |
| empty: | انتخاب عناصری که هیچ فرزندی ( یا هیچ محتوایی ) ندارند | مثال |
| first-child: | انتخاب اولین فرزند از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) | مثال |
| last-child: | انتخاب آخرین فرزند از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) | مثال |
| first-of-type: | انتخاب اولین فرزند از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) | مثال |
| last-of-type: | انتخاب آخرین فرزند از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) | مثال |
| nth-child(n): | انتخاب اولین فرزند nام از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) | مثال |
| nth-last-child(n): | انتخاب آخرین فرزند nام از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) | مثال |
| nth-of-type(n): | انتخاب اولین فرزند nام از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) | مثال |
| nth-last-of-type(n): | انتخاب آخرین فرزند nام از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) | مثال |
| only-of-type: | انتخاب عناصر تک فرزند از یک نوع خاص | مثال |
| only-child: | انتخاب عناصری که تک فرزند می باشند | مثال |
| ()not: | انتخاب نکن عنصر ( تگ ، کلاس ، ID ) که در داخل پرانتز می باشند | مثال |
| optional: | انتخاب عناصری که تکمیل کردنشان اختیاری می باشد | مثال |
| required: | انتخاب عناصری که تکمیل کردنشان اجباری می باشد | مثال |
| in-range: | انتخاب عناصری که در داخل یک محدوده ( رِنج ) مشخصی هستند | مثال |
| out-of-range: | انتخاب عناصری که خارج از یک محدوده ( رِنج ) مشخصی هستند | مثال |
| invalid: | انتخاب عناصری که دارای مقدار نامعتبر می باشند | مثال |
| valid: | انتخاب عناصری که دارای مقدار معتبر می باشند | مثال |
| read-only: | انتخاب عناصری که فقط خواندنی هستند | مثال |
| read-write: | انتخاب عناصری که فقط خواندنی نیستند | مثال |
| root: | انتخاب ریشه ( تمامی ) عناصر موجود در صفحه | مثال |
| target: | انتخاب لنگر ( Anchor ) لینک های فعال در صفحه | مثال |
| indeterminate: | انتخاب وضعیت ( اینکه انتخاب شدن یا نه ) عناصر | مثال |
| lang(lang_code): | انتخاب تگ هایی که دارای صفت lang می باشند | مثال |
