از شبه عنصر ها(Pseudo-elements) برای فرمت بندی قسمتی مشخص از یک عنصر استفاده میشود.
برای مثال، شبه عنصر ها در موارد زیر میتوانند استفاده شوند :
- فرمت بندی اولین حرف، یا خط از یک عنصر
- اضافه کردن محتوا به قبل، یا بعد از محتوای یک عنصر
سینتکس(نحو)
سینتکس شبه عنصر ها به صورت زیر است :
} selector ::pseudo-element
; property :value
{
به جفت دو نقطه در سینتکس شبه عناصر دقت کنید برای مثال first-line:: در مقابل first-line:
در CSS۳ جفت دو نقطه برای شبه عنصرها جایگزین دو نقطه تکی شده است. به این طریق میتوان شبه عنصر ها را از شبه کلاس ها تشخیص داد.
در گذشته در CSS۱ و CSS۲ از دو نقطه ی تکی برای هر دوی شبه عناصر و شبه کلاس ها استفاده میشد.
شبه عنصر first-line::
شبه عنصر first-line:: برای اضافه کردن یک استایل خاص به اولین خط از یک متن استفاده میشود.
نمونه مثال زیر اولین خط از یک متن در یک عنصر <p> را فرمت بندی میکند:
} p ::first-line
; color : #ff0000
; font-variant : small-caps
{
نکته : شبه عنصر first-line:: تنها میتواند برای عناصر سطح block استفاده شود.
صفات ذکر شده در پایین را میتوان به شبه عنصر first-line:: اعمال کرد:
- صفات font
- صفات color
- صفات background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
شبه عنصر first-letter::
شبه عنصر first-letter:: برای اضافه کردن یک استایل خاص به اولین حرف از یک متن استفاده میشود.
نمونه مثال زیر اولین حرف از متون داخل عناصر <p> را فرمت بندی میکند :
} p ::first-letter
; color : #ff0000
; font-size : xx-large
{
نکته : شبه عنصر first-letter:: تنها میتواند برای عناصر سطح block استفاده شود.
صفات ذکر شده در پایین را میتوان به شبه عنصر first-letter:: اعمال کرد:
- صفات font
- صفات color
- صفات background
- صفات margin
- صفات padding
- صفات border
- text-decoration
- vertical-align(تنها اگر مقدار float برابر با none باشد)
- text-transform
- line-height
- float
- clear
شبه عنصر ها و کلاس ها در CSS
شبه عنصر ها میتوانند با کلاس ها در CSS ترکیب شوند :
} p .intro ::first-letter
; color : #ff0000
;% font-size : 200
{
نمونه مثال بالا اولین حرف از پارگراف هایی که صفت class آنها برابر با intro هست را به رنگ قرمز درآورده و با سایز فونت بزرگتری نمایش میدهد.
ترکیب چندین شبه عنصر
چندین شبه عنصر میتوانند با هم ترکیب شوند.
در نمونه مثال زیر، اولین حرف از یک پاراگراف به رنگ قرمز خواهد شد و اندازه ی فونت آن با xx-large مقدار دهی میشود.
باقی مانده ی خط اول به رنگ آبی و به شکل small-caps در خواهد آمد. باقی مانده ی پاراگراف نیز دارای رنگ و اندازه ی فونت پیشفرض است :
} p ::first-letter
; color : #ff0000
; font-size : xx-large
{
} p ::first-line
; color : #0000ff
; font-variant : small-caps
{
شبه عنصر before::
از شبه عنصر before:: برای اضافه کردن مقداری محتوا به قبل از محتوای یک عنصر میتوان استفاده کرد.
نمونه مثال زیر یک تصویر را به قبل از محتوای هر عنصر <h۱> اضافه میکند :
} h1 ::before
; content : url (smiley.gif )
{
شبه عنصر after::
از شبه عنصر ::after برای اضافه کردن مقداری محتوا به بعد از محتوای یک عنصر میتوان استفاده کرد.
نمونه مثال زیر یک تصویر را به بعد از محتوای هر عنصر <h۱> اضافه میکند :
} h1 ::after
; content : url (smiley.gif )
{
شبه عنصر selection::
شبه عنصر selection:: قسمتی از یک عنصر را مشخص میکند که به وسیله ی کاربر انتخاب شده است.
صفات ذکر شده در پایین را میتوان به شبه عنصر ::selection اعمال کرد:
- color
- background
- cursor
- outline
در نمونه مثال زیر وقتی کاربر متن را انتخاب میکند رنگ متن به رنگ قرمز و رنگ پس زمینه ی آن به رنگ زرد در خواهد آمد :
} selection::
; color : red
; background : yellow
{