شبه عناصر

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

برای مثال، می‌توان از آن برای موارد زیر استفاده کرد:

• استایل دهی حرف اول، یا خط اول یک عنصر

• واردکردن محتوا در قبل، یا بعد از محتوای یک عنصر

شیوه نوشتار شبه عناصر

1 selector::pseudo-element {
2   property:value;
3 }

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

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

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

مثال

1 p::first-line {
2   color: #ff0000;
3   font-variant: small-caps;
4 }

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

نکته: شبه عنصر ::first-line تنها روی عناصر block-level قابل اعمال است.

ویژگی‌های زیر را می‌توان روی شبه عنصر ::first-line اعمال کرد:

• ویژگی‌های قلم

• ویژگی‌های رنگ

• ویژگی‌های پس زمینه

• فاصله گذاری بین کلمات

• فاصله گذاری بین حروف

• قالب بندی متن

• تراز بندی عمودی

• تبدیل (به انگلیسی: transform) متن

• ارتفاع خط

• ویژگی clear

به دو علامت دو نقطه (::) توجه کنید - ::first-line در برابر :first-line

علامت دو :: با علامت : برای شبه کلاس‌ها در CSS3 جایگزین شد. این تصمیم از سوی W3C بود تا تفاوت بین شبه کلاسها و شبه عنصرها مشخص شود.

شیوه نوشتار تک علامت : هم برای شبه کلاس‌ها و هم شبه عناصر در CSS2 و CSS1 استفاده می‌شد.

برای سازگاری نسخه‌های قبلی، شیوه نوشتار تک علامتی : برای شبه عناصر CSS2 و CSS1 قابل قبول است.

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

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

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

مثال

1 p::first-letter {
2   color: #ff0000;
3   font-size: xx-large;
4 }

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

ویژگی‌های زیر روی شبه عنصر ::first-letter اعمال می‌شوند:

• ویژگی‌های قلم

• ویژگی‌های رنگ

• ویژگی‌های پس زمینه

• ویژگی‌های حاشیه

• ویژگی‌های padding

• ویژگی‌های کادر

• قالب بندی متن

• تراز عمودی (تنها در صورتی که مقدار ویژگی "float" برابر با "none" باشد)

• تبدیل متن

• ارتفاع خط

• ویژگی float

• ویژگی clear

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

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

مثال

1 p.intro::first-letter {
2   color: #ff0000;
3   font-size:200%;
4 }

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

مثال بالا حرف اول پاراگراف‌هایی با کلاس "intro" را به رنگ قرمز و در اندازه بزرگ نمایش می‌دهد.

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

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

در مثال زیر، اولین حرف یک پاراگراف قرمز رنگ، و در اندازه خیلی بزرگ (به انگلیسی: xx-large) خواهد بود. باقی مانده خط اول آبی، و به صورت حروف کوچک خواهد بود. رنگ و قلم مابقی پاراگراف به صورت پیش‌فرض خواهد بود:

مثال

1 p::first-letter {
2   color: #ff0000;
3   font-size: xx-large;
4 }
5 
6 p::first-line {
7   color: #0000ff;
8   font-variant: small-caps;
9 }

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

CSS - شبه عنصر ::before

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

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

مثال

1 h1::before {
2   content: url(smiley.gif);
3 }

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

CSS - شبه عنصر ::after

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

مثال زیر یک تصویر را بعد از محتوای عر عنصر <h1> وارد می‌کند.

مثال

1 h1::after {
2   content: url(smiley.gif);
3 }

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

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

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

ویژگی‌های CSS رو به رو می‌توانند بر روی شبه عنصر ::selection اعمال شوند: ویژگی color، ویژگی background، ویژگی cursor، و ویژگی outline.

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

مثال

1 ::selection {
2   color: red;
3   background: yellow;
4 }

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

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

انتخابگر (به انگلیسی: Selector)	مثال	توضیح مثال
::after	p::after	چیزی را بعد از محتوای هر عنصر <p> وارد می‌کند
::before	p::before	چیزی را قبل از محتوای هر عنصر <p> وارد می‌کند
::first-letter	p::first-letter	حرف اول هر عنصر <p> را انتخاب می‌کند
::first-line	p::first-line	خط اول هر عنصر <p> را انتخاب می‌کند
::selection	p::selection	بخشی از عنصری که کاربر انتخاب کرده را انتخاب می‌کند

تمامی شبه کلاسهای CSS

انتخابگر (به انگلیسی: Selector)	مثال	توضیح مثال
:active	a:active	لینک‌ فعال را انتخاب می‌کند
:checked	input:checked	همه عنصرهای <input> علامت‌دار (به انگلیسی: Checked) را انتخاب می‌کند
:disabled	input:disabled	همه عنصرهای <input> غیرفعال را انتخاب می‌کند
:empty	p:empty	هر عنصر <p> فاقد فرزند را انتخاب می‌کند
:enabled	input:enabled	هر عنصر <p> فعال را انتخاب می‌کند
:first-child	p:first-child	هر عنصر <p> که اولین فرزند والدش است را انتخاب می‌کند
:first-of-type	p:first-of-type	هرعنصر <p> که اولین عنصر <p> والدش است را انتخاب می‌کند
:focus	input:focus	عنصر <input>ای که دارای focus است را انتخاب می‌کند
:hover	a:hover	لینک‌هایی را که نشانه‌گر موس روی آنها قرار می‌گیرد را انتخاب می‌کند
:in-range	input:in-range	عناصر <input> را که مقداری در یک محدوده به خصوص دارند را انتخاب می‌کند
:invalid	input:invalid	تمامی عناصر <input> که مقداری نامعتبر دارند را انتخاب می‌کند
:lang(language)	p:lang(it)	هر عنصر <p> که خاصیت lang آنها با عبارت "it" شروع شود را انتخاب می‌کند
:last-child	p:last-child	هر عنصر <p> که آخرین فرزند والد خود است را انتخاب می‌کند
:last-of-type	p:last-of-type	هر عنصر <p> که آخرین عنصر <p> فرزند والد خود است را انتخاب می‌کند
:link	a:link	تمامی لینک‌های بازدید نشده را انتخاب می کند
:not(selector)	:not(p)	هر عنصری که عنصر <p> نباشد را انتخاب می‌کند
:nth-child(n)	p:nth-child(2)	هر عنصر <p> که دومین فرزند والد خود است را انتخاب می‌کند
:nth-last-child(n)	p:nth-last-child(2)	هر عنصر <p> که دومین فرزند والد خود، از آخر است را انتخاب می‌کند
:nth-last-of-type(n)	p:nth-last-of-type(2)	هر عنصر <p> که دومین عنصر والد خود، از آخر است را انتخاب می‌کند
:nth-of-type(n)	p:nth-of-type(2)	هر عنصر <p> که دومین عنصر والد خود است را انتخاب می‌کند
:only-of-type	p:only-of-type	هر عنصر <p> که تنها فرزند <p> والد خود است را انتخاب می‌کند
:only-child	p:only-child	هر عنصر <p> که تنها فرزند والد خود است را انتخاب می‌کند
:optional	input:optional	عناصر <input> که خاصیت "required" ندارند را انتخاب می‌کند
:out-of-range	input:out-of-range	عناصر <input> ای که مقداری خارج از یک محدوده به خصوص دارند را انتخاب می کند
:read-only	input:read-only	عناصر <input> ای که خاصیت "readonly" دارند را انتخاب می‌کند
:read-write	input:read-write	عناصر <input> ای که خاصیت "readonly" ندارند را انتخاب می‌کند
:required	input:required	عناصر <input> ای که خاصیت "required" آنها مشخص شده‌است را انتخاب می‌کند
:root	root	عنصر ریشه سند را انتخاب می‌کند
:target	#news:target	عنصر فعال #news را انتخاب می‌کند (کلیک بر روی یک url که حاوی نام anchor است)
:valid	input:valid	تمامی عناصر <input> که مقدار معتبر دارند را انتخاب می‌کند
:visited	a:visited	تمامی لینک‌های بازدید شده را انتخاب می کند

صفحهٔ بعد»

«صفحهٔ قبل