شبه المان (یا Pseudo Element) ها در CSS عباراتی هستند که با اضافه شدن به سلکتورهای عادی (یا در حالت تنها)، بخشی از المانها را برای تعیین استایل انتخاب میکنند. برای مثال شبه المان ها میتوانند خط اول یا حرف اول یک پاراگراف را انتخاب کنند یا بخشی از متن پاراگراف که توسط کاربر انتخاب شده را هدف قرار دهند. شبهالمانها حتی میتوانند امکان درج محتوایی قبل یا بعد از محتوای فعلی یک المان را فراهم کنند.
بیشتر بخوانید: آشنایی با سلکتورها و انواع آنها در CSS
شیوه استفاده از شبه المان ها در CSS
سینتکس کلی سلکتور شبه المان در سیاساس مشابه با نمونه ساده زیر است. همانطور که مشاهده میکنید برای درج شبه المان ها پیش از عنوان شبه المان، دو کاراکتر کلن (به صورت ::) قرار میگیرد.
selector::pseudo-element {
...
}به عنوان مثال، سلکتور زیر خط اول متن در تمام پاراگراف ها (یا المانهای <p>) را انتخاب میکند. با توجه به بخش اظهاریه در این مثال، رنگ متن خط اول در تمام پاراگرافها قرمز خواهد شد.
p::first-line {
color: red;
}تفاوت شبه المان با شبه کلاس
برخلاف شبهالمانها که بخشی از المانها را برای تعیین استایل انتخاب میکنند شبه کلاس (یا Pseudo Class) ها المان هایی را انتخاب میکنند که در یک وضعیت خاص قرار دارند. برای مثال با ترکیب سلکتورهای معمولی و شبه کلاس ها میتوان لینکی که نشانگر ماوس روی آن قرار گرفته، لینکهای ملاقات شده یا پاراگراف هایی که اولین فرزند والدشان هستند را برای تعیین استایل هدف قرار داد.
بیشتر بخوانید: آشنایی با شبه کلاس ها در CSS
نکته: همانطور که مشاهده کردید پیش از نام شبه المان از دو کاراکتر کلن استفاده میشود. این درحالیست که پیش از نام شبه کلاس ها تنها یک کاراکتر کلن قرار میگیرد. این تفاوت براساس مستندات فعلی W3C برای ایجاد تمایز میان شبه المان ها و شبه کلاس ها در نظر گرفته شده است. با این حال از آنجایی که در نسخه های قدیمیتر برای شبه المان ها و شبه کلاس ها از یک کاراکتر کلن استفاده میشد همچنان برای شبه المان های اصلی امکان استفاده از هر دو حالت وجود دارد.
شبه المان های متداول در CSS
در جدول زیر فهرستی از رایجترین شبه المان ها را همراه با مثال و کاربرد مشاهده میکنید.
| شبه المان | سلکتور مثال | مفهوم سلکتور مثال |
|---|---|---|
| ::first-line | p::first-line | خط اول تمام پاراگرافها را برای تعیین استایل انتخاب میکند. |
| ::first-letter | p::first-letter | حرف اول تمام پاراگرافها را برای تعیین استایل انتخاب میکند. |
| ::after | p::after | برای اضافه کردن محتوا بعد از محتوای فعلی هر پاراگراف به کار میرود. |
| ::before | p::before | برای اضافه کردن محتوا قبل از محتوای فعلی هر پاراگراف به کار میرود. |
| ::marker | ::marker | بخش مارکر (یا نشانه) عناصر لیستها را برای تعیین استایل انتخاب میکند. |
| ::selection | ::selection | بخشی از المانها که توسط کاربر انتخاب یا هایلایت شده را برای تعیین استایل انتخاب میکند. |
جزئیات بیشتر در مورد شبه المان های فوق را در قسمتهای مجزا خواهید آموخت.
بازگشت به فهرست مجموعه آموزشی CSS
