عناصر کاذب (Pseudo-element) در CSS
شبه عناصر یا pseudo-element ها در زبان CSS برای استایل دهی به بخش خاصی از یک عنصر استفاده می شوند. به عنوان مثال می تواند برای موارد زیر به کار رود:
- استایل دادن به اولین حرف از یک کلمه، یا خط اول یک عنصر
- وارد کردن محتوا قبل یا بعد از محتوای اصلی یک عنصر
ساختار کلی نوشتاری عناصر کاذب به شکل زیر است:
در این ساختار باید حواستان به دو علامت دو نقطه (::) باشد. درجدیدترین نسخه CSS که 3 CSS است باید از دو عدد دو نقطه (کولن) پشت سر هم استفاده کنید. کنسرسیوم جهانی وب این کار را انجام داد تا بین شبه کلاس ها و شبه عناصر تفاوت واضحی وجود داشته باشد. در نسخه های قبلی CSS هم برای شبه عناصر و هم برای شبه کلاس ها از یک علامت دو نقطه استفاده می شد (:) اما در نسخه CSS3 دیگر این طور نیست.
عنصر کاذب ::first-line
این عنصر برای استایل دهی به خط اول یک عنصر استفاده می شود. مثال زیر به اولین خط تمام عناصر یا تگ های p در صفحه اعمال می شود :
خروجی مثال بالا به شکل زیر است:
خط اول با Enter یا Line Break مشخص نمی شود بلکه از نظر ظاهری هر کلمه ای که در خط اول قرار بگیرد استایل بالا برای آن اعمال می شود. بنابراین این ویژگی واکنش گرا است چرا که اگر پنجره یا صفحه مرورگر خود را کوچک کنید می بینید که با تغییر اندازه ی خط اول و تعداد کلماتش، باز هم خط اول قرمز می ماند.
نکته: عنصر ::first-line فقط می تواند بر روی عناصر block اعمال شود. عنصر کاذب ::first-line می تواند خصوصیات زیر را بگیرد:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
عنصر کاذب ::first-letter
عنصر کاذب ::first-letter به منظور استایل دهی به حرف اول یک متن به کار می رود. مثال زیر اولین حرف متن را در تمام عنصر های <p> استایل دهی می کند:
خروجی مثال بالا به شکل زیر است. همانطور که در خروجی می بینید تنها حرف اول از این متن به رنگ قرمز درآمده و اندازه آن بزرگتر شده است:
نکته: عنصر ::first-letter فقط مروی عناصر block اعمال می شود. عنصر ::first-letter می تواند خصوصیات زیر را بگیرد:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
عناصر کاذب و کلاس های CSS
عناصر کاذب می توانند با کلاس های CSS ترکیب شوند:
خروجی مثال بالا به شکل زیر است:
در مثال بالا عنصر کاذب (::first-letter) با کلاس CSS ترکیب شده و اولین حرف پاراگرافی که کلاس intro دارد را استایل دهی کرده است.
ترکیب چنین عنصر کاذب با یکدیگر
در CSS این امکان وجود دارد که چندین عنصر کاذب را با یکدیگر ترکیب کنیم. مثال زیر نحوه انجام این کار را نشان می دهد:
خروجی مثال بالا به شکل زیر است:
در مثال بالا، اولین حرف پاراگراف بزرگتر و به رنگ قرمز درآمده است، بقیه ی خط به رنگ آبی و با حروف کوچک نمایش دهده شده است. بقیه ی پاراگراف نیز اندازه ی فونت و رنگ پیش فرض خودش را خواهد داشت.
عنصر کاذب ::before در CSS
عنصر کاذب ::before می تواند به منظور ایجاد کردن محتوایی قبل از محتوای اصلی یک عنصر به کار رود. در مثال زیر یک تصویر قبل از محتوای اصلی هر عنصر h1 ایجاد می شود.
خروجی مثال بالا به شکل زیر است:
عنصر کاذب ::after در CSS
از عنصر کاذب ::after به منظور ایجاد کردن محتوایی بعد از محتوای اصلی یک عنصر به کار می رود. در مثال زیر یک تصویر بعد از محتوای هر عنصر h1 قرار می گیرد.
خروجی مثال بالا به شکل زیر است:
عنصر کاذب ::selection در CSS
عنصر کاذب ::selection قسمتی از عنصری است که توسط کاربر انتخاب می شود. عنصر کاذب ::selection مشخصه های CSS زیر را می تواند بگیرد:
::selection: color, background, cursor, and outline
به طور مثال در کد زیر زمانی که کاربر متنی را انتخاب می کند، رنگ آن متن قرمز می شود و پس زمینه آن به رنگ قرمز تغییر می کند.
خروجی مثال بالا به شکل زیر است. البته شما خود به عنوان کاربر باید بخشی از متن را انتخاب کنید تا بتوانید تغییر آن را ببینید.
