جلسه 22 آموزش CSS: شبه عناصر (pseudo elements) در CSS

سلام رفیق خلاق! 👋 چطوری؟ امیدوارم آماده یه جلسه جذاب دیگه از آموزش CSS باشی. توی جلسه بیست و دوم، می‌خوایم بریم سراغ یه مبحث فوق‌العاده کاربردی و باحال به اسم شبه‌ عناصر یا همون Pseudo-elements.

تا حالا شده بخوای یه قسمت خاصی از یه تگ رو استایل بدی؟ مثلاً فقط خط اول یه پاراگراف؟ یا شاید بخوای یه شکلک یا آیکون کوچولو قبل یا بعد از یه متن اضافه کنی، بدون اینکه کد HTML رو دستکاری کنی؟ 🤔 اینجاست که شبه‌ عناصر مثل یه فرشته نجات ظاهر می‌شن! 🧚‍♀️

اینا ابزارهای کوچولوی قدرتمندی توی CSS هستن که بهت اجازه می‌دن کارهای خلاقانه‌ای روی صفحات وب انجام بدی و استایل‌های خاصی رو به بخش‌هایی از عناصر اعمال کنی که شاید فکرشم نمی‌کردی بشه!

توی این مقاله قراره با هم:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

جلسه 2 آموزش CSS: سینتکس CSS – اصول پایه و قواعد نوشتاری

مطالعه

جلسه 4 آموزش CSS: انتخابگرها یا Selectors در CSS

مطالعه

جلسه 20 آموزش CSS: فرم (form) در CSS

مطالعه

1. کامل یاد بگیریم شبه‌عناصر چی هستن و به چه دردی می‌خورن.
2. ببینیم فرمول کلی استفاده ازشون توی CSS چیه.
3. با مهم‌ترین و پرکاربردترین شبه‌عناصر آشنا بشیم و کلی مثال بزنیم.

پس کمربندتو محکم ببند 😁 که می‌خوایم یه شیرجه عمیق بزنیم توی دنیای شبه‌ عناصر! 🚀

شبه عناصر (pseudo elements) در CSS

شبه عناصر یه جور ابزار جادویی تو CSS هستن که بهت اجازه می‌دن به قسمت‌های خاصی از یه عنصر دسترسی پیدا کنی و استایل بدی، بدون اینکه نیاز باشه تو HTML چیزی اضافه کنی. مثلاً می‌تونی اولین خط یه پاراگراف رو بولد کنی یا یه خط تزئینی بعد از یه تیتر بذاری. اینا با (::) تو کد مشخص می‌شن، مثل ::before یا ::first-line.

فایده استفاده از شبه‌ عناصر چیه؟

• سادگی کار: دیگه لازم نیست یه عالمه تگ اضافی به HTML‌ات اضافه کنی. همه چی با CSS کنترل میشه.
• قدرت بیشتر: استایل‌هایی می‌تونی بدی که با انتخابگرهای معمولی نمی‌شه.
• جذابیت بصری: با اضافه کردن المان‌های تزئینی یا کاربردی، سایتت رو برای کاربرا قشنگ‌تر می‌کنی.

خلاصه که شبه عناصر مثل یه دستیار باحالن که کار طراحی رو برات راحت‌تر و جذاب‌تر می‌کنن! 👍

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

برای اینکه شبه عناصر رو تو CSS استفاده کنی، باید از این ساختار ساده پیروی کنی:

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

• selector: همون چیزی که می‌خوای استایلش رو تغییر بدی، مثلاً p برای پاراگراف‌ها.
• pseudo-element: اسم شبه عنصری که می‌خوای باهاش کار کنی، مثل ::after یا ::first-letter.
• property و value: ویژگی‌ که می‌خوای بهش مقدار بدی، مثلاً رنگ یا اندازه.

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

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

حالا که فهمیدی شبه عناصر چی هستن و به چه دردی میخورن، بیا همه شبه عناصر رو با مثال برات توضیح بدم تا هیچی از قلم نیفته:

1️⃣ ::first-letter

چی کار می‌کنه؟ اولین حرف یه متن رو انتخاب می‌کنه و بهت اجازه می‌ده استایلش رو تغییر بدی.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

کاربردش کجاست؟ تو مقالات یا کتاب‌ها برای اینکه اولین حرف پاراگراف خاص و شیک بشه.

2️⃣ ::first-line

چی کار می‌کنه؟ اولین خط یه متن رو هدف می‌گیره و استایلش رو عوض میکنه.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

کاربردش کجاست؟ برای جلب توجه مخاطب به خط اول یه پاراگراف یا متن.

3️⃣ ::before

چی کار می‌کنه؟ یه المان فرضی قبل از محتوای اصلی عنصر اضافه می‌کنه.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

کاربردش کجاست؟ برای گذاشتن آیکون، فلش یا هر چیز تزئینی قبل از یه عنصر.

4️⃣ ::after

چی کار می‌کنه؟ مثل ::before عمل می‌کنه، ولی بعد از محتوا، المان مدنظر رو اضافه می‌کنه.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

کاربردش کجاست؟ برای اضافه کردن تزئینات یا توضیحات بعد از یه عنصر.

5️⃣ ::selection

چی کار می‌کنه؟ استایل متنی که کاربر با ماوس انتخاب می‌کنه رو تغییر می‌ده.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

کاربردش کجاست؟ برای اینکه متن انتخاب‌شده خوشگل‌تر و خواناتر بشه.

6️⃣ ::placeholder

چی کار می‌کنه؟ متن placeholder توی ورودی‌ها (مثل input یا textarea) رو استایل می‌ده.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

کاربردش کجاست؟ برای قشنگ‌تر کردن فرم‌ها و راهنمایی کاربرا.

7️⃣ ::marker

چی کار می‌کنه؟ نشانه های لیست‌ها (مثل نقطه یا عدد) رو استایل می‌ده.

.______          ___   ____    ____  ___   ____    __    ____ .______  
|   _  \        /   \  \   \  /   / /   \  \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \  \   \/   / /  ^  \  \   \/    \/   /  |  |_)  |
|      /      /  /_\  \  \_    _/ /  /_\  \  \            /   |   ___/ 
|  |\  \----./  _____  \   |  |  /  _____  \  \    /\    /    |  |     
| _| `._____/__/     \__\  |__| /__/     \__\  \__/  \__/     | _|     

کاربردش کجاست؟ برای اینکه لیست‌هات خاص و متفاوت بشن.

نکات مهم که باید یادت بمونه

• ویژگی content: برای ::before و ::after حتماً باید content بذاری، حتی اگه خالی باشه (content: “”).
• محدودیت‌ها: بعضی شبه عناصر مثل ::first-letter فقط روی متن کار می‌کنن، نه مثلاً عکس.
• ترکیب با شبه کلاس‌ها: می‌تونی شبه عناصر رو با شبه کلاس‌ها ترکیب کنی، مثلاً a:hover::after.

جمع‌بندی

خب رفیق! 🎉 حالا دیگه شبه عناصر رو مثل کف دستت می‌شناسی. با این ابزارا می‌تونی استایل‌های خفن و کاربردی به سایتت بدی و بدون دردسر HTML اضافی، همه چی رو تو CSS مدیریت کنی. فقط یادت باشه که حسابی تمرین کنی و با مثال‌های مختلف ور بری تا دستت راه بیفته.

اگه سوالی داشتی یا چیزی برات گنگ بود، بگو که برات توضیح بدم. امیدوارم با این مقاله کلی چیز یاد گرفته باشی. موفق باشی تا جلسه بعدییییی فعلنننن 🌟