آموزش کامل شبه کلاس ها در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل شبه کلاس ها در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش کامل شبه کلاس ها در CSS
شبه کلاس ها یا به انگلیسی Pseudo Classes در CSS برای تعریف یک حالت خاص از یک عنصر می باشد، این حالت خاص که میگم مثلا میتونه موقع رفتن ماوس بروی یک عنصر باشد و یا مثلا موقع کلیک ماوس بروی یک عنصر.
شبه کلاس ها میتوانند موارد زیر باشند :
- وقتی ماوس بروی یک عنصر برود
- وقتی ماوس بروی یک عنصر فوکوس کند
- برای انتخاب فرزند خاصی از یک عنصر
- برای تعریف استایل برای لینک های درون یک صفحه
- برای انتخاب نشدن یک عنصر (یعنی مثلا بقیه انتخاب بشن ولی فلان عنصر انتخاب نشود)
- و …
پس در کل شبه کلاس در CSS یعنی ایجاد و یا تعریف حالت خاص یک عنصر ، حالت خاصی که تنها میتواند توسط این شبه کلاس ها ایجاد شود، در ادامه میتوانید لیست کامل شبه کلاس های CSS را مشاهده نمایید.
Free-Learn
شکل کلی استفاده از شبه کلاس در CSS
ما برای استفاده از شبه کلاس ها در یک صفحه وب باید بصورت زیر عمل نماییم :
|
1 2 3 |
Selector:pseudo-class { property:value; } |
که Selector میشه همون انتخابگر ما بعدش یه : میزاریم و بعدش شبه کلاس رو مینویسیم و در نهایت ویژگی های CSS مورد نظرمون رو وارد مینماییم.
اگه توجه کرده باشید شبه عناصر :: دارند ولی شبه کلاس ها : دارند، این در واقع برای متمایز کردن شبه کلاس ها با شبه عناصر می باشد که در CSS3 اضافه شده است.
اگر شما شبه کلاس ها و شبه عناصر هردوتاییشون رو با : بنویسید، بازم مشکلی نداره و خروجی میده ولی خب درکل برای شبه عناصر :: در CSS3 اضافه شده است و پیشنهاد میشه شماهم برای شبه عناصر از :: استفاده نمایید.
از شبه کلاس ها نمیتوان درون صفت Style بصورت استایل درون تگی / خطی استفاده کرد.
Free-Learn
لیست کامل شبه کلاس ها در CSS
در جدول زیر میتوانید لیست کامل شبه کلاس های CSS را مشاهده نمایید و همچنین توضیح هرکدام را نیز در جلوی آن مطالعه نمایید، همچنین برای مشاهده مثال هر یک از شبه کلاس های زیر لطفا بروی دکمه مثال کلیک نمایید.
برای مشاهده مثال آنلاین هر یک از شبه کلاس های موجود در جدول زیر لطفا بروی دکمه مثال کلیک نمایید.
| شبه کلاس (انتخابگر) | توضیح | مثال |
|---|---|---|
| :active | لینک فعال را انتخاب میکند. (دقیقا لحظه کلیک ماوس بروی یک لینک) | مثال |
| :focus | لحظه فوکوس کردن ماوس بروی یک عنصر را مشخص میکند. | مثال |
| :hover | برای وقتی که ماوس بروی یک عنصر می رود. | مثال |
| :link | لینک هایی را که هنوز روشون کلیک نشده را انتخاب میکند. | مثال |
| :visited | انتخاب میکند لینک هایی را که روشون کلیک شده. (لینک های دیده شده) |
مثال |
| :checked | عنصری که تیک خورده را انتخاب میکند. | مثال |
| :enabled | عنصری که فعال می باشد را انتخاب میکند. | مثال |
| :disabled | عنصری که غیرفعال می باشد را انتخاب میکند. | مثال |
| :empty | انتخاب میکند عنصری را که هیچ فرزندی ندارد. | مثال |
| :first-child | اولین فرزند از یک عنصر پدر را انتخاب میکند. | مثال |
| :last-child | آخرین فرزند از یک عنصر پدر را مشخص میکند. | مثال |
| :first-of-type | اولین عنصر از یک نوع خاص را انتخاب میکند. | مثال |
| :last-of-type | آخرین عنصر از یک نوع خاص را انتخاب میکند. | مثال |
| :in-range | انتخاب یک عنصر در یک محدوده مشخص. | مثال |
| :out-of-range | انتخاب یک عنصر وقتی از یک محدوده مشخص بیرون بزند. | مثال |
| :valid | انتخاب کن عناصری را که مقدارشون معتبر می باشد. | مثال |
| :invalid | برای وقتی که مقدار یک عنصر معتبر نباشد. | مثال |
| :lang(language) | انتخاب یک عنصر با زبان خاص ( با استفاده از صفت lang ) ( لیست کد زبان های دنیا ) |
مثال |
| :not(selector) | داره میگه انتخاب نکن فلان عنصر را. | مثال |
| :nth-child(n) | انتخاب اولین فرزند nام از یک عنصر ( انتخاب از طریق عدد یا فرمول ) | مثال |
| :nth-last-child(n) | انتخاب آخرین فرزند nام از یک عنصر ( انتخاب از طریق عدد یا فرمول ) | مثال |
| :nth-last-of-type(n) | انتخاب آخرین فرزند nام از یک نوع عنصر خاص ( انتخاب از طریق عدد یا فرمول ) | مثال |
| :nth-of-type(n) | انتخاب اولین فرزند nام از یک نوع عنصر خاص ( انتخاب از طریق عدد یا فرمول ) | مثال |
| :only-of-type | انتخاب عناصر تک فرزند از یک نوع خاص | مثال |
| :only-child | انتخاب عناصری که تک فرزند می باشند | مثال |
| :optional | عناصری را که تکمیل کردنشان اختیاری است را انتخاب میکند. | مثال |
| :required | انتخاب عناصری را که تکمیل کردنشان اجباری می باشد. | مثال |
| :read-only | انتخاب عناصری که فقط خواندنی هستند. | مثال |
| :read-write | انتخاب عناصری که فقط خواندنی نیستند. | مثال |
| :root | انتخاب ریشه یک صفحه وب ( انتخاب تمامی عناصر ) | مثال |
| :target | انتخاب لنگر مقصد از یک لینک ( معمولا برای استفاده در لینک های داخلی ) |
مثال |
خب دوستان به پایان آموزش کامل شبه کلاس ها در CSS رسیدیم، امیدوارم که مشکلی با این شبه کلاس ها نداشته باشید. همچنین پیشنهاد میکنم حتما شبه عناصر را مشاهده نمایید.
