شبه عناصر در css برای استایل دهی به بخش هایی از یک المان استفاده می شوند.
به عنوان مثال:
- برای استایل دهی به اولین کلمه یا اولین خط از یک المان
- برای افزودن محتوا (content) به قبل یا بعد از محتوای یک المان
قاعده کلی استفاده از شبه عناصر در css به صورت زیر است:
selector::pseudo-element { property: value; }
شبه عنصر first-line::
این شبه عنصر برای افزودن استایل به خط اول از یک متن استفاده می شود. به مثال زیر توجه کنید:
p::first-line { color: #ff0000; font-variant: small-caps; }
You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.
نکته: شبه عنصر ::first-line
فقط برای المان های block-level
کاربرد دارد.
خصوصیات زیر را با استفاده از شبه عنصر ::first-line
می توان به المان ها اختصاص داد:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
علامت ::
برای شبه عناصر و علامت :
برای شبه کلاس ها استفاده می شود. این قاعده ای است که W3C تعیین کرده تا تمایزی بین شبه کلاس ها و شبه عناصر به وجود آید.
در CSS2 و CSS1 برای هر دوی شبه کلاس ها و شبه عناصر از :
استفاده می شد.
شبه عنصر first-letter::
این شبه عنصر برای دادن استایل مشخصی به اولین حرف از یک متن استفاده می شود.
در مثال زیر کاربرد این شبه عنصر را مشاهده می کنید:
p::first-letter { color: #ff0000; font-size: xx-large; }
You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!
نکته: شبه عنصر ::first-letter
فقط برای المان های block-level کاربرد دارد.
خصوصیات زیر را با استفاده از شبه عناصر ::first-letter
می توان به المان ها اختصاص داد:
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (اگر مقدار float برابر none باشد)
- text-transform
- line-height
- float
- clear
شبه عناصر در css و کلاس های css
شبه عناصر را می توان با کلاس های css ترکیب کرد. به مثال زیر دقت کنید:
p.intro::first-letter { color: #ff0000; font-size: 200%; }
مثال بالا اولین حرف از پاراگرافی که کلاس آن intro است را استایل دهی می کند.
استفاده از چند شبه عنصر
می توان چندین شبه عنصر را با هم ترکیب کرد و همزمان نتیجه را در یک المان مشاهده کرد:
p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; }
You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!
در مثال بالا، اولین حرف از پاراگراف به رنگ قرمز و با اندازه xx-large درآمده و مابقی خط اول پاراگراف به رنگ آبی و با فونت small-caps تبدیل شده است.
شبه عنصر before::
از این شبه عنصر زمانی استفاده می شود که بخواهیم محتوایی (content) را قبل از المان خاصی اضافه کنیم.
در مثال زیر یک تصویر به ابتدای المان های h3
اضافه شده است:
h3::before { content: url(smiley.gif); }
This is a heading
The ::before pseudo-element inserts content before the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
شبه عنصر after::
از این شبه عنصر زمانی استفاده می شود که بخواهیم محتوایی (content) را بعد از المان خاصی اضافه کنیم.
در مثال زیر یک تصویر به انتهای المان های h3
اضافه شده است:
h3::after { content: url(smiley.gif); }
This is a heading
The ::before pseudo-element inserts content before the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
شبه عنصر selection::
در این نوع از شبه عنصر قادریم بخشی از متن که توسط کاربر انتخاب می شود، را قالب بندی کنیم.
در شبه عنصر ::selection می توانیم موارد زیر را تعیین کنیم:
- color
- background
- cursor
- outline
در مثال زیر هر بخش از متن که توسط کاربر انتخاب شود رنگش قرمز و پس زمینه اش به رنگ زرد درمی آید:
::selection { color: red; background: yellow; }
Select some text on this page:
This is a paragraph.
Note: ::selection is not supported in Internet Explorer 8 and earlier versions.
Note: Firefox supports an alternative, the ::-moz-selection property.
دیدگاه بگذارید