شبه عنصر ها در CSS

از شبه عنصر ها(Pseudo-elements) برای فرمت بندی قسمتی مشخص از یک عنصر استفاده میشود. در این فصل با انواع شبه عنصر آشنا خواهیم شد.


 از شبه عنصر ها(Pseudo-elements) برای فرمت بندی قسمتی مشخص از یک عنصر استفاده میشود.

برای مثال، شبه عنصر ها در موارد زیر میتوانند استفاده شوند :

  • فرمت بندی اولین حرف، یا خط از یک عنصر
  • اضافه کردن محتوا به قبل، یا بعد از محتوای یک عنصر

سینتکس(نحو)

سینتکس شبه عنصر ها به صورت زیر است :

selector::pseudo-element {
    property:value;
}

به جفت دو نقطه در سینتکس شبه عناصر دقت کنید برای مثال first-line:: در مقابل first-line:
در CSS3 جفت دو نقطه برای شبه عنصرها جایگزین دو نقطه تکی شده است. به این طریق میتوان شبه عنصر ها را از شبه کلاس ها تشخیص داد.
در گذشته در CSS1 و CSS2 از دو نقطه ی تکی برای هر دوی شبه عناصر و شبه کلاس ها استفاده میشد.


شبه عنصر 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:: برای اضافه کردن مقداری محتوا به قبل از محتوای یک عنصر میتوان استفاده کرد.

نمونه مثال زیر یک تصویر را به قبل از محتوای هر عنصر <h1> اضافه میکند :

h1::before {
    content: url(smiley.gif);
}
خودتان امتحان کنید

شبه عنصر after::

از شبه عنصر ::after برای اضافه کردن مقداری محتوا به بعد از محتوای یک عنصر میتوان استفاده کرد.

نمونه مثال زیر یک تصویر را به بعد از محتوای هر عنصر <h1> اضافه میکند :

h1::after {
    content: url(smiley.gif);
}
خودتان امتحان کنید

شبه عنصر selection::

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

صفات ذکر شده در پایین را میتوان به شبه عنصر ::selection اعمال کرد:

  • color 
  • background
  • cursor
  • outline

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

::selection {
    color: red; 
    background: yellow;
}
خودتان امتحان کنید

 

منتشر شده در ۲۸ شهریور ۱۳۹۶ حمید رضا ملکی ۸۶۱ بازدید
دیدگاه ها
احمد ایرانپور سه شنبه ۳۰ مرداد ۱۳۹۷

با درود به استاد این قسمت خیلی جذاب بود ممنون از زحماتتون یه سوال:وقتی در کروم ،اینسپکت را میزنیم یه سری از عناصر را نمیشه تشخیص داد جز چه کلاس یا آی دی هستند .چطوری میشه اینا را تشخیص داد؟

حمید رضا ملکی سه شنبه ۳۰ مرداد ۱۳۹۷

سلام. معمولا همه عناصر تشخیص داده میشوند. منظور شما دقیقا چه عناصری است؟