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

شبه عنصرها ( pseudo-elements ) برای اضافه کردن استایل به بعضی بخش ها استفاده میشن.
این ویژگی در CSS2 معرفی شد.
روش استفاده از شبه عنصر ها برای عنصر ها به این صورته:

selector:pseudo-element {property:value;}

یا برای کلاس ها:

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

مثال ها:

:first-line

با :first-line میتونیم یک استایل رو به خط اول یک متن نسبت بدیم:

p:first-line {color:#ff0000;}

تو مثال بالا به خط اول پاراگراف رنگ قرمز نسبت دادیم آموزش CSS  شبه عنصرها در CSS   Pouya Saadeghi

البته first-line فقط از ویژگی های زیر پشتیبانی میکنه:

:first-letter

با :first-letter میتونیم استایل رو به حرف اول نسبت بدیم:

p:first-letter {color:#ff0000;}

تو مثال بالا حرف اول پاراگراف رنگش قرمز میشه آموزش CSS  شبه عنصرها در CSS   Pouya Saadeghi

و first-letter هم از این ویژگی‌ها پشتیبانی میکنه:

در مثال زیر حرف اول پاراگراف سایز ۴۰ پیکسل و خط اول رنگ قرمز خواهد داشت:

p:first-letter{font-size:40px;}p:first-line{color:#ff0000;}
:before

با این تگ میتونیم محتوایی رو به قبل از تگ مورد نظر اضافه کنیم. در مثال زیر یک تصویر رو قبل از تگ h1 قرارمیدیم:

h1:before{content:url(icon.gif);}
:after

و با :after عکسی رو به بعد از تگ h1 اضافه میکنیم:

h1:after{content:url(icon.gif);}

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

h1:after{content:"this text will be after my H1";}

ترجمه از w3schools

نوشته شده توسط پویا صادقی

بیشتر بخونید:

تگ Audio و Video در HTML5مقدمات HTML5تغییر شکل دوبعدی در CSS3سلکتورهای CSS3
پاسارگاد گرافیک در گوگل پلاس
پاسارگاد گرافیک را دنبال کنید!