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

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

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

مقالات مرتبط