این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کامل شبه عناصر در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل شبه عناصر در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش کامل شبه عناصر در CSS
ما در جلسه قبلی از سری آموزش های مقدماتی زبان CSS بطور کامل با شبه کلاس ها در CSS آشنا شدیم، حال در این جلسه میخوایم با شبه عناصر در CSS آشنا شویم.
شبه عناصر هم دقیقا همانند شبه کلاس ها، یجور انتخابگر هستن که ما با استفاده از اونا میتونیم بخش یا حالت یا قسمت خاصی از یک تگ رو براش استایل تعریف کنیم.
بفرض مثال من میخوام یه کلمه خاصی رو به قبل یا بعد از متن داخل تمامی تگ های P موجود در صفحه اضافه کنم ، خب خیلی راحت میشه از شبه عناصر استفاده کرد.
مثال شماره ۱ : اضافه کردن یک متن دلخواه به قبل و بعد از تمامی تگ های P موجود در صفحه
|
1 2 3 4 5 6 7 |
p::after{ .... } p::before{ .... } |
پیشنهاد میکنم حتما لیست کامل شبه کلاس های CSS بهمراه مثال آنلاین را مشاهده نمایید.
اگه توجه کرده باشید شبه عناصر :: دارند ولی شبه کلاس ها : دارند، این در واقع برای متمایز کردن شبه کلاس ها با شبه عناصر می باشد.
اگر شما شبه عناصر رو با : بنویسید، بازم مشکلی نداره و خروجی میده ولی خب درکل برای شبه عناصر سعی کنید از :: استفاده نمایید.
Free-Learn
شکل کلی استفاده از شبه عناصر در CSS
ما برای استفاده از شبه عناصر در یک صفحه وب باید بصورت زیر عمل نماییم :
|
1 2 3 |
Selector::Pseudo-Element { دستورات سی اس اس در اینجا } |
که Selector میشه همون انتخابگر ما بعدش یه :: میزاریم و بعدش شبه عنصر رو مینویسیم و در نهایت ویژگی های CSS مورد نظرمون رو وارد مینماییم.
از شبه عناصر نمیتوان درون صفت Style بصورت استایل درون تگی / خطی استفاده کرد.
Free-Learn
لیست کامل شبه عناصر در CSS
در جدول زیر میتوانید لیست کامل شبه عناصر CSS را مشاهده نمایید و همچنین برای مشاهده مثال هر یک از شبه عناصر زیر لطفا بروی دکمه مثال کلیک نمایید.
| شبه عنصر | توضیح | مثال |
|---|---|---|
| ::after | اضافه کردن محتوا به بعد از [ محتوای اصلی ] تگ | مثال |
| ::before | اضافه کردن محتوا به قبل از [ محتوای اصلی ] تگ | مثال |
| ::first-letter | اولین حرف / کاراکتر از متن یک تگ | مثال |
| ::first-line | اولین سطر ( خط ) از متن یک تگ | مثال |
| ::selection | اون متنی که توسط کاربر انتخاب میشه | مثال |
| ::placeholder | متن زمینه ای Input ها | مثال |
