آموزش کامل شبه عناصر در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل شبه عناصر در CSS با من همراه باشید.

آموزش کامل شبه عناصر در CSS

Free-Learn

آموزش کامل شبه عناصر در CSS

ما در جلسه قبلی از سری آموزش های قدم به قدم زبان CSS بطور کامل با شبه کلاس ها در CSS آشنا شدیم، حال در این جلسه میخوایم بطور کامل با شبه عناصر در CSS آشنا شویم.

حال اصلا شبه عناصر یعنی چی ؟ یعنی اینکه ما بتونیم بخش یا قسمتی از یک عنصر ( عنصر یا همون تگ های HTML ) را انتخاب کنیم سپس با استفاده از CSS به اون استایل بدهیم.

برای مثال : من میخوام توی صفحه وبم تمامی تگ های پاراگرافم حرف اولشون اندازشون بزرگ و مثلا رنگشون آبی باشه ، یا مثلا میخوام قبل از تمامی پاراگراف های درون صفحه کلمه ( سلام ) چاپ بشه، به راحتی با شبه عناصر میشه اینکارو کرد.

پیشنهاد میکنم حتما لیست کامل شبه کلاس های CSS بهمراه مثال آنلاین را مشاهده نمایید.

Free-Learn

شکل کلی استفاده از شبه عناصر در CSS

ما برای استفاده از شبه عناصر در یک صفحه وب باید بصورت زیر عمل نماییم :

که Selector میشه همون انتخابگر ما بعدش یه :: میزاریم و بعدش شبه عنصر رو مینویسیم و در نهایت ویژگی های CSS مورد نظرمون رو وارد مینماییم.

اگه توجه کرده باشید شبه عناصر :: دارند ولی شبه کلاس ها : دارند، این در واقع برای متمایز کردن شبه کلاس ها با شبه عناصر می باشد که در CSS3 اضافه شده است.

اگر شما شبه کلاس ها و شبه عناصر هردوتاییشون رو با : بنویسید، بازم مشکلی نداره و خروجی میده ولی خب درکل برای شبه عناصر :: در CSS3 اضافه شده است و پیشنهاد میشه شماهم برای شبه عناصر از :: استفاده نمایید.

از شبه عناصر نمیتوان درون صفت Style بصورت استایل درون تگی / خطی استفاده کرد.

Free-Learn

لیست کامل شبه عناصر در CSS

در جدول زیر میتوانید لیست کامل شبه عناصر CSS را مشاهده نمایید و همچنین توضیح هرکدام را نیز در جلوی آن مطالعه نمایید، همچنین برای مشاهده مثال هر یک از شبه عناصر زیر لطفا بروی دکمه مثال کلیک نمایید.

شبه عنصر توضیح مثال
::after برای گذاشتن محتوا یا دادن استایل به (بعد از) یک عنصر. مثال
::before برای گذاشتن محتوا یا دادن استایل به (قبل از) یک عنصر. مثال
::first-letter اولین حرف از یک عنصر را انتخاب میکند. مثال
::first-line اولین خط (لاین) یا سطر از یک عنصر را انتخاب میکند. مثال
::selection مواردی را که توسط کاربر انتخاب می شود را انتخاب میکند.
(مثلا میتونیم مشخص کنیم که اگر کاربر با ماوس متنی را انتخاب کرد اون متن آبی شود و..)
مثال

خب دوستان خسته نباشید، من سعی کردم به بهترین حالت ممکن براتون توضیح بدم و امیدوارم که هیچ مشکلی در این جلسه با شبه عناصر ها نداشته باشید، و اگرم مشکلی چیزی داشتید حتما در بخش پرسش و پاسخ CSS مشکلتان را مطرح نمایید تا بتونم پاسخ بدم.

Free-Learn

دریافت PDF یا پرینت این مطلب