آموزش طراحی سایت (HTML CSS Javascript) | آتریا

شبه عناصر در CSS

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

Wiki

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

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

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

از شبه عناصر می توان برای استایل دهی اولین کاراکتر (first-letter) و یا اولین خط (first-line) یک پاراگراف استفاده نمود.
می تون از آن برای اضافه کردن یک محتوای دلخواه قبل (before) و یا بعد (after) از یک عنصر استفاده نمود.

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

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 بکار برده می شوند:

font
float
color
background
margin
padding
border
text-decoration
vertical-align (اگر خصوصیت font با مقدار none تنظیم شده باشد)
text-transform
line-height
float
clear

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

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

: نوشته شده توسط امیر پهلوان صادق; بازدید: 27885

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

دیدگاه‌ها

+4 # nina

سلام
چرا در قسمت
::-moz-selectio n { /* Code for Firefox */
color: red;
background: yellow;
}

::selection {
color: red;
background: yellow;
}

اگه moz-selection -:: v رو نذاریم عمل نمیکنه؟ ممنون میشم بیشتر توضیح بدهید
با سپاس

+3 # مهرداد صلاحی

سلام.
این عملگر در مرورگر فایرفاکس عمل میکنه.

علامت دونقطه در واقع عناصر کاذب هستند. عناصر کاذب، در واقع عناصری هستند که می‌توانیم توسط انها قسمتی از متن صفحه رو انتخاب کنیم، در صورتی که انتخاب انها توسط تگ‌ها و یا کلاس‌ها میسر نیست.
اگر بخواهیم عناصر کاذب را به شیوه‌ی استاندارد بنویسیم، باید از دو علامت دونقطه استفاده کنیم، ولی یک علامت دو نقطه، پشتیبانی بهتری در مرورگرها دارد.

+4 # sara

با سلام و تشکر از سایت خوبتون
برای شبه عناصر first-line و first-letter خصوصیت اول در سایت w3s که مرجع می باشد font آورده شده لطفا تصحیح کنید.
همچنین بعد از شبه عنصر after شبه عنصر ::selection اضافه شده که در اینجا بد نیست که گفته شود.

+4 # امیر پهلوان صادق

سلام، با تشکر از لطف شما، موارد ذکر شده اصلاح شد.

+7 # داریان

با سلام و خسته نباشید
طبق مطلبی که سایت منبع شما گذاشته ظاهراً باید برای شبه عناصر از (::) استفاده بشه.چون از (:) در css1 و css2 برای شبه عناصر و شبه کلاسها به طور همزمان استفاده می شده اما در css3 دیگه کاربرد نداره و باید (::) باشه .
خیلی ممنون از سایت خوبتون موفق باشید.

بازآوری فهرست دیدگاه‌ها

آموزش صوتی CSS

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی