با سلام دوستان عزیز ، امیدوارم که حال شماخوب باشه و شاد باشیددرمورد سیتنکس  pseudo-elements امروز مطلبی را خواستم اموزش بدم .

سیتنکس  pseudo-elements
selector:pseudo-element {property:value;}‎

در کلاس های CSS را می توان از  pseudo-elements نیز  استفاده کرد:

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

: first-line Pseudo-element

از first-line” pseudo-element برای اضافه کردن استایل ویژه به اولین خط متن استفاده می شود.

در مثال زیر، مرورگر خط اول متن را در عنصر p، مطابق با استایل “خط اول pseudo-element ” آرایش می کند.

نکته مهم: “خط اول pseudo-element ” را فقط می توان با عنصرهای block-level

استفاده کرد.

نکته مهم : پراپرتی های زیر به خط اول pseudo-element  اعمال می شوند:

font properties

color properties

background properties

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

first-letter Pseudo-element:

از “حرف اول pseudo-element برای اضافه کردن استایلی ویژه به اولین حرف متن استفاده می شود.

نمونه یک
?
۱
۲
۳
۴

p:first-letter {
color: red;
font-size: xx-large;
}

نکته مهم: حرف اول pseudo-element را فقط می توان با عنصرهای block-level

استفاده کرد.

نکته مهم پراپرتی های زیر به حرف اول pseudo-element ” اعمال می شوند:

font properties

color properties

background properties

margin properties

padding properties

border properties

text-decoration

vertical-align (only if “float” is “none”)

text-transform

line-height

float

clear

Pseudo-elements و کلاس های CSS

Pseudo-elements را می توان با کلاس های CSS ترکیب کرد:

نمونه دو
?
۱
۲
۳

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

مثلا بالا حرف اول همه پاراگراف ها با class=article را قرمز نشان می دهد.

Pseudo-elements چندگانه

می توان چندین pseudo-elements را نیز با هم ترکیب کرد.

در مثال زیر، حرف اول پاراگراف قرمز خواهد شد، با سایز فونت xx-large. بقیه خط اول، آبی و بصورت حروف کوچک خواهد بود. بقیه پاراگراف دارای اندازه فونت و رنگ پیش فرض خواهد بود.

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷
۸

p:first-letter{
color: #ff0000;
font-size: xx-large;
}
p:first-line{
color: #0000ff;
font-variant: small-caps;
}

:before Pseudo-element

before pseudo-element را می توان برای insert کردن مقدار یک content قبل از content یک عنصر استفاده کرد.

مثلا زیر، تصویری را قبل از هر عنصردرج کرد.

نمونه چهار
?
۱
۲
۳

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

Pseudo-elements

ستون CSS نشان می دهد پراپرتی در کدام ورژن CSS تعریف می شود (CSS1 یا CSS2).

نام Pseudo

شرح

CSS

After

بعد از عنصر ،  Contrnt اضافه می کند.

۲

Befor

قبل از عنصر ،  Contrnt اضافه می کند.

۲

First-Letter

یک استایل به اولین کاراکتر متن اضافه می کند.

۱

First-Line

یک استایل به اولین خط متن اضافه می کند.