|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

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

شماره همراه خود را وارد کنید

ورود و ادامه

Pseudo-Elements در CSS

شبه عنصر چیست؟

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

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

    استایل دهی به اولین حرف یا کلمه از یک عنصر
  • وارد کردن محتوا قبل یا بعد از محتوای عنصر مورد نظر

     

    ترکیب کد شبه عنصر ها

    ترکیب کد برای Pseudo-Elements در CSS به شرح زیر می باشد :

    ترکیب کد شبه عناصر
    selector::pseudo-element {
        property:value;
    }
    مشاهده مثال



    نکته ! به علامت :: در ابتدای شبه عناصر توجه کنید. این علامت در CSS3 برای جداسازی شبه کلاس ها با شبه عنصر می باشد. قبلا در CSS1 و CSS2 هر دو مورد با : مشخص می شدند.

     

    شبه عنصر first-line::

    این شبه عنصر برای تعریف استایلی خاص برای خط اول یک متن ، استفاده می شود.
    در مثال زیر ، خط اول متن در تمام عناصر <p> فرمت دهی می شود.

    مثال :
    شبه عنصر first-line
    p::first-line {
        color: #ff0000;
        font-variant: small-caps;
    }
    مشاهده مثال





    نکته : شبه عنصر first-line::  فقط برای عناصر سطح بلوک قابل استفاده است.

    صفات زیر را می توان به first-line::  اضافه کرد :

    font properties
    color properties
    background properties
    word-spacing
    letter-spacing
    text-decoration
    vertical-align
    text-transform
    line-height
    clear

     

    شبه عنصر first-letter::

    این شبه عنصر برای تعریف استایلی خاص برای حرف اول یک متن ، استفاده می شود.
    در مثال زیر ، حرف اول متن در تمام عناصر <p> فرمت دهی می شود.

    مثال :
    شبه عنصر first-letter
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }
    مشاهده مثال


    نکته : شبه عنصر first-letter::  فقط برای عناصر سطح بلوک قابل استفاده است.

    صفات زیر را می توان به first-letter::  اضافه کرد :

    font properties
    color properties
    background properties
    margin properties
    padding properties
    border properties
    text-decoration
    vertical-align (فقط زمانی که float بر روی none تنظیم شده باشد )
    text-transform
    line-height
    float
    clear

     

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

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

    مثال :
    شبه عنصر و کلاسهای CSS
    p.intro::first-letter {
        color: #ff0000;
        font-size:200%;
    }
    مشاهده مثال




    در مثال بالا ، حرف اول پاراگراف هایی که دارای class="intro" هستند ، به رنگ قرمز و با اندازه بزرگتر نمایش داده خواهد شد.


     

    Pseudo-element های چندگانه

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

    مثال :
    چند شبه عنصر با هم
    p::first-letter {
        color: #ff0000;
        font-size: xx-large;
    }
    
    p::first-line {
        color: #0000ff;
        font-variant: small-caps;
    }
    مشاهده مثال



     

    شبه عنصر before::

    این شبه عنصر برای افزودن محتوایی قبل از محتوای عنصر مورد نظر ، استفاده می شود.
    در مثال زیر ، قبل از محتوای هر <h1> یک تصویر نمایش داده می شود.

    مثال :
    شبه عنصر before
    h1::before {
        content: url(smiley.gif);
    }
    مشاهده مثال



     

    شبه عنصر after::

    این شبه عنصر برای افزودن محتوایی بعد از محتوای عنصر مورد نظر ، استفاده می شود.
    در مثال زیر ، بعد از محتوای هر <h1> یک تصویر نمایش داده می شود.

    مثال :
    شبه عنصر after
    h1::after {
        content: url(smiley.gif);
    }
    مشاهده مثال



     

    شبه عنصر selection::

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

    color ، background ، cursor  و outline.

    در مثال زیر متن انتخاب شده به رنگ قرمز و بر روی رنگ زمینه زرد نمایش داده می شود.

    مثال :
    شبه عنصر selection
    ::selection {
        color: red;
        background: yellow;
    }
    مشاهده مثال



     

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

     
    سلکتور مثال توضیحات مثال
    ::after p::after Insert something after the content of each <p> element
    ::before p::before Insert something before the content of each <p> element
    ::first-letter p::first-letter Selects the first letter of each <p> element
    ::first-line p::first-line Selects the first line of each <p> element
    ::selection p::selection Selects the portion of an element that is selected by a user


    تمام شبه کلاس ها در CSS
     
    سلکتور مثال توضیحات مثال
    :active a:active Selects the active link
    :checked input:checked Selects every checked <input> element
    :disabled input:disabled Selects every disabled <input> element
    :empty p:empty Selects every <p> element that has no children
    :enabled input:enabled Selects every enabled <input> element
    :first-child p:first-child Selects every <p> elements that is the first child of its parent
    :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
    :focus input:focus Selects the <input> element that has focus
    :hover a:hover Selects links on mouse over
    :in-range input:in-range Selects <input> elements with a value within a specified range
    :invalid input:invalid Selects all <input> elements with an invalid value
    :lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
    :last-child p:last-child Selects every <p> elements that is the last child of its parent
    :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
    :link a:link Selects all unvisited links
    :not(selector) :not(p) Selects every element that is not a <p> element
    :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
    :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
    :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
    :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
    :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
    :only-child p:only-child Selects every <p> element that is the only child of its parent
    :optional input:optional Selects <input> elements with no "required" attribute
    :out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
    :read-only input:read-only Selects <input> elements with a "readonly" attribute specified
    :read-write input:read-write Selects <input> elements with no "readonly" attribute
    :required input:required Selects <input> elements with a "required" attribute specified
    :root root Selects the document's root element
    :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
    :valid input:valid Selects all <input> elements with a valid value
    :visited a:visited Selects all visited links

     

نظر شما

>

نظرات

رضا حسینی مطالب خیلی روان و عالی توضیح داده شده . ممنون از شما

یادگیری CSS

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد