شما اینجا هستید

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

برای مثال، آن میتواند برای استایل دادن به اولین حرف یا خط هر عنصر به کار رود. همچنین از آن میتوان در درج کردن محتوا قبل و بعد از محتوای یک عنصر استفاده کرد.

سینتکس

نحوه دستوری شبه عنصر به صورت زیر است :

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

 

به دو نقطه دوتایی "::" در سینکس توجه کنید، برای ایجاد تفاوت بین شبه کلاس و شبه عنصر از آن استفاده میشود.

 

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

شبه عنصر first-line:: برای افزودن استایل ویژه به اولین خط از یک متن به کار میرود.

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

<html>

<head>

<style>

p::first-line {

    color: #ff0000;

    font-variant: small-caps;

}

</style>

</head>

<body>


<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>


</body>

</html>

 

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

 

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

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

مثال زیر اولین کلمه از متن را در همه عناصر <p> قالب بندی میکند.

<html>

<head>

<style>

p::first-letter {

    color: #ff0000;

    font-size: xx-large;

}

</style>

</head>

<body>


<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>


</body>

</html>

 

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

ترکیب شبه عنصر و کلاسهای CSS

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

<html>

<head>

<style>

p.intro::first-letter {

    color: #ff0000;

    font-size:200%;

} 

</style>

</head>

<body>


<p class="intro">This is an introduction.</p>

<p>This is a paragraph with some text. A bit more text even.</p>


</body>

</html>

 

مثال بالا اولین کاراکتر از پاراگرافی که با کلاس intro مشخص شده است را بزرگتر و با رنگ قرمز نمایش میدهد.

 

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

چند شبه عنصر را میتوان با هم ترکیب کرد.

در مثال زیر، اولین حرف از پاراگراف قرمز و بزرگ میشود. بقیه خط اول آبی و کوچک میشود و بقیه پارگراف با رنگ و اندازه پیشفرض نمایش داده میشود:

<html>

<head>

<style>

p::first-letter {

    color: #ff0000;

    font-size: xx-large;

}


p::first-line {

    color: #0000ff;

    font-variant: small-caps;

}

</style>

</head>

<body>


<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>


</body>

</html>

 

شبه عنصر before::

با استفاده از شبه عنصر before:: میتوان قبل از محتوای یک عنصر، محتوا درج کرد.

مثال زیر یک تصویر را قبل از عنصر <h1> درج میکند:

<html>

<head>

<style>

h1::before {

    content: url(smiley.gif);

}

</style>

</head>

<body>


<h1>This is a heading</h1>

<p>The ::before pseudo-element inserts content before an element.</p>


<h1>This is a heading</h1>

</body>

</html>

 

در مثال بالا با استفاده از ویژگی content که مقدار آن آدرس یک تصویر بود قبل از محتوای عنصر <h1> تصویر را درج کردیم.

شبه عنصر after::

با استفاده از شبه عنصر after:: میتوان بعد از محتوای یک عنصر، محتوا درج کرد.

مثال زیر یک تصویر را بعد از عنصر <h1> درج میکند:

<html>

<head>

<style>

h1::after {

    content: url(smiley.gif);

}

</style>

</head>

<body>


<h1>This is a heading</h1>

<p>The ::after pseudo-element inserts content after an element.</p>


<h1>This is a heading</h1>

</body>

</html>

 

شبه عنصر selection::

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

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

<html>

<head>

<style>

::-moz-selection { /* Code for Firefox */

    color: red;

    background: yellow;

}


::selection {

    color: red;

    background: yellow;

}

</style>

</head>

<body>


<h1>Select some text on this page:</h1>


<p>This is a paragraph.</p>

<div>This is some text in a div element.</div>


</body>

</html>

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.