آموزش کامل شبه عناصر در CSS همراه با مثال
آموزش کامل شبه عناصر در CSS
ما در جلسه قبلی از سری آموزش های قدم به قدم زبان CSS بطور کامل با شبه کلاس ها در CSS آشنا شدیم، حال در این جلسه میخوایم بطور کامل با شبه عناصر در CSS آشنا شویم.
حال اصلا شبه عناصر یعنی چی ؟ یعنی اینکه ما بتونیم بخش یا قسمتی از یک عنصر ( عنصر یا همون تگ های HTML ) را انتخاب کنیم سپس با استفاده از CSS به اون استایل بدهیم.
برای مثال : من میخوام توی صفحه وبم تمامی تگ های پاراگرافم حرف اولشون اندازشون بزرگ و مثلا رنگشون آبی باشه ، یا مثلا میخوام قبل از تمامی پاراگراف های درون صفحه کلمه ( سلام ) چاپ بشه، به راحتی با شبه عناصر میشه اینکارو کرد.
شکل کلی استفاده از شبه عناصر در CSS
ما برای استفاده از شبه عناصر در یک صفحه وب باید بصورت زیر عمل نماییم :
|
1 2 3 |
Selector::pseudo-element { property:value; } |
که Selector میشه همون انتخابگر ما بعدش یه :: میزاریم و بعدش شبه عنصر رو مینویسیم و در نهایت ویژگی های CSS مورد نظرمون رو وارد مینماییم.
اگه توجه کرده باشید شبه عناصر :: دارند ولی شبه کلاس ها : دارند، این در واقع برای متمایز کردن شبه کلاس ها با شبه عناصر می باشد که در CSS3 اضافه شده است.
اگر شما شبه کلاس ها و شبه عناصر هردوتاییشون رو با : بنویسید، بازم مشکلی نداره و خروجی میده ولی خب درکل برای شبه عناصر :: در CSS3 اضافه شده است و پیشنهاد میشه شماهم برای شبه عناصر از :: استفاده نمایید.
از شبه عناصر نمیتوان درون صفت Style بصورت استایل درون تگی / خطی استفاده کرد.
لیست کامل شبه عناصر در CSS
در جدول زیر میتوانید لیست کامل شبه عناصر CSS را مشاهده نمایید و همچنین توضیح هرکدام را نیز در جلوی آن مطالعه نمایید، همچنین برای مشاهده مثال هر یک از شبه عناصر زیر لطفا بروی دکمه مثال کلیک نمایید.
| شبه عنصر | توضیح |
|---|---|
| ::after | برای گذاشتن محتوا یا دادن استایل به (بعد از) یک عنصر. |
| ::before | برای گذاشتن محتوا یا دادن استایل به (قبل از) یک عنصر. |
| ::first-letter | اولین حرف از یک عنصر را انتخاب میکند. |
| ::first-line | اولین خط (لاین) یا سطر از یک عنصر را انتخاب میکند. |
| ::selection | مواردی را که توسط کاربر انتخاب می شود را انتخاب میکند. (مثلا میتونیم مشخص کنیم که اگر کاربر با ماوس متنی را انتخاب کرد اون متن آبی شود و..) |
| ::placeholder | متن زمینه ای عناصر ورودی را انتخاب میکند |
خب دوستان خسته نباشید، من سعی کردم به بهترین حالت ممکن براتون توضیح بدم و امیدوارم که هیچ مشکلی در این جلسه با شبه عناصر ها نداشته باشید.
بیشتر بخوانید:
- نحوه کار با شبه کلاس ها در CSS
- قالب بندی متون در HTML
- داستان سرایی چیست؟
- آموزش کار با کلاس‌های کمکی Utility Classes در بوت‌استرپ 4
- آموزش کار با عناصر Block و Inline در CSS
- سرویس های ایمیل مارکتینگ رایگان
- راه کارهای کاهش نرخ پرش یا Bounce Rate
- روش های واقعی افزایش فالوور اینستاگرام
- راه‌های بهبود برنامه نویسی
مطالب زیر را حتما مطالعه کنید
آموزش رایگان HTML مقدماتی تا پیشرفته بخش پاراگراف
UI چیست؟
برترین فریم ورک های جاوا اسکریپت در 2021
آموزش رایگان افزونه فید اینستاگرام
آموزش رایگان کار با لایه ها و پالت Color & Swatches در فتوشاپ
دیدگاهتان را بنویسید