شبه عناصر در css

شبه عناصر در 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);
}

شبه عنصر after::

از این شبه عنصر زمانی استفاده می شود که بخواهیم محتوایی (content) را بعد از المان خاصی اضافه کنیم.

در مثال زیر یک تصویر به انتهای المان های h3 اضافه شده است:

h3::after {
  content: url(smiley.gif);
}

شبه عنصر selection::

در این نوع از شبه عنصر قادریم بخشی از متن که توسط کاربر انتخاب می شود، را قالب بندی کنیم.

در شبه عنصر ::selection می توانیم موارد زیر را تعیین کنیم:

• color
• background
• cursor
• outline

در مثال زیر هر بخش از متن که توسط کاربر انتخاب شود رنگش قرمز و پس زمینه اش به رنگ زرد درمی آید:

::selection {
  color: red;
  background: yellow;
}

لینک مقاله مرجع