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 یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز