شبه المان در CSS

شبه المان (یا 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

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.