شبه عناصر در CSS

چاپ

شبه عناصر (pseudo-elements)

Wiki

شبه عناصر در CSS برای اضافه کردن Styleهای خاص، به بعضی از Selectorها استفاده می شود.

در واقع از شبه عناصر (pseudo-element) برای استایل دهی بخشی از یک عنصر استفاده می شود.

برخی از استفاده های شبه عناصر:

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

selector:pseudo-element {property:value;}

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

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

شبه عنصر first-line:

Wiki

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

در مثال زیر، خصوصیت color و font-variant روی اولین خط پاراگراف (عنصر p) اعمال می شود:

مثال (شبه عناصر در CSS)

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
خودتان امتحان کنید »

توجه: شبه عنصر first-line تنها با عناصر block می تواند استفاده شود.

توجه: خصوصات زیر برای شبه عنصر first-line بکار برده می شوند:


شبه عنصر first-letter:

Wiki

برای اضافه کردن یک style خاص روی اولین حرف یک متن استفاده می شود:

مثال (شبه عناصر در CSS)

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
خودتان امتحان کنید »

توجه: شبه عنصر first-letter تنها با عناصر block می تواند استفاده شود.

توجه: خصوصات زیر برای شبه عنصر first-letter بکار برده می شوند:


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

Wiki

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

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

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


اعمال شبه عناصر مختلف روی عنصر p

Wiki

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

در مثال زیر، اولین حرف تمام پاراگراف ها با رنگ قرمز و اندازه آن با مقدار "xx-large" تنظیم شده است، همچنین باقیمانده خط اول، نیز با رنگ آبی و خصوصیت font-variant آنها با مقدار "small-caps" تنظیم شده است:

مثال (شبه عناصر در CSS)

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
خودتان امتحان کنید »

شبه عنصر before:

Wiki

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

در مثال زیر، قبل از هر تگ <h1> در صفحه HTML ، عکس "smiley.gif" درج می شود:

مثال (شبه عناصر در CSS)

h1:before
{
content:url(smiley.gif);
}
خودتان امتحان کنید »

شبه عنصر after:

Wiki

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

در مثال زیر، بعد از هر تگ <h1> در صفحه HTML ، عکس "smiley.gif" درج می شود:

مثال (شبه عناصر در CSS)

h1:after
{
content:url(smiley.gif);
}
خودتان امتحان کنید »

شبه عنصر selection:: در CSS

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

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

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

مثال (شبه عناصر در CSS)

::selection {
    color: red; 
    background: yellow;
}
خودتان امتحان کنید »

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

Wiki

در جدول زیر کلیه شبه کلاس ها در CSS لیست شده است: 

گزینشگرمثالتوضیحات مثالCSS
:link a:link

تمام لینک هایی که از آن بازدید نشده است را انتخاب می کند.

1
:visited a:visited

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

1
:active a:active

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

1
:hover a:hover

لینک هایی را که موس روی آن حرکت می کند را انتخاب می کند.

1
:focus input:focus

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

2
:first-child p:first-child

تمام عناصر <p> که اولین فرزند پدرشان هستند (فرزند ارشد پدرشان) را انتخاب می کند.

2
:lang(language) p:lang(it)

تمام عناصر <p> را انتخاب می کند که خصوصیت lang آن با "it" (ایتالیایی) تنظیم شده است.

2
:first-of-type p:first-of-type

تمام عناصر <p> را که اولین عنصر <p> پدرشان باشند را انتخاب می کند.

توجه فرمایید که p:first-child باید p اولین فرزند پدرش باشد.

3
:last-of-type p:last-of-type

تمام عناصر <p> که آخرین عنصر <p> پدرشان هستند را انتخاب می کند.

3
:only-of-type p:only-of-type

تمام عناصر <p> که تنها عنصر <p> پدرشان هستند را انتخاب می کند.

3
:only-child p:only-child

تمام عناصر <p> که تنها فرزند پدرشان هستند را انتخاب می کند. (تک فرزند.)

3
:nth-child(n) p:nth-child(2)

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

3
:nth-last-child(n) p:nth-last-child(2)

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

3
:nth-of-type(n) p:nth-of-type(2)

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

3
:nth-last-of-type(n) p:nth-last-of-type(2)

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

3
:last-child p:last-child

تمام عناصر <p> که آخرین فرزند پدرشان هستند را انتخاب می کند.

3
:root :root

عنصر root سند را بر می گرداند.

3
:empty p:empty

تمام عناصر <p> که فرزند ندارند، را انتخاب می کند.

3
:target #news:target

تمام عناصر news# فعال جاری را بر می گرداند.

3
:enabled input:enabled

تمام عناصر <input> را انتخاب می کند که enabled هستند.

3
:disabled input:disabled

تمام عناصر <input> که disabled هستند را انتخاب می کند.

3
:checked input:checked

تمام عناصر <input> که checked هستند را انتخاب می کند.

3
:not(selector) :not(p)

تمام عناصر را به جز عناصر <p> انتخاب می کند.

3

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

گزینشگرمثالتوضیحات مثالCSS
:first-letter p:first-letter

اولین حرف از هر تگ <p> را انتخاب می کند.

1
:first-line p:first-line

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

1
:before p:before

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

2
:after p:after

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

2
::selection ::selection

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

3