آموزش Pseudo-elements در CSS

سیتنکس pseudo-elements:

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

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

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

: first-line Pseudo-element

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

first-letter Pseudo-element:

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

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

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

                                   
                    font properties
                    color properties 
                    background properties
                    word-spacing
                    letter-spacing
                    text-decoration
                    vertical-align
                    text-transform
                    line-height
                    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).