سبد خرید (0)

تبلیغات

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


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

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

دیدگاه‌ها  

+3 # nina 1395-03-08 14:14
سلام
چرا در قسمت
::-moz-selectio n { /* Code for Firefox */
color: red;
background: yellow;
}

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



اگه moz-selection -:: v رو نذاریم عمل نمیکنه؟ ممنون میشم بیشتر توضیح بدهید
با سپاس
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1395-03-12 00:14
سلام.
این عملگر در مرورگر فایرفاکس عمل میکنه.

علامت دونقطه در واقع عناصر کاذب هستند. عناصر کاذب، در واقع عناصری هستند که می‌توانیم توسط انها قسمتی از متن صفحه رو انتخاب کنیم، در صورتی که انتخاب انها توسط تگ‌ها و یا کلاس‌ها میسر نیست.
اگر بخواهیم عناصر کاذب را به شیوه‌ی استاندارد بنویسیم، باید از دو علامت دونقطه استفاده کنیم، ولی یک علامت دو نقطه، پشتیبانی بهتری در مرورگرها دارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # sara 1394-07-02 15:12
با سلام و تشکر از سایت خوبتون
برای شبه عناصر first-line و first-letter خصوصیت اول در سایت w3s که مرجع می باشد font آورده شده لطفا تصحیح کنید.
همچنین بعد از شبه عنصر after شبه عنصر ::selection اضافه شده که در اینجا بد نیست که گفته شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-07-02 20:29
سلام، با تشکر از لطف شما، موارد ذکر شده اصلاح شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # داریان 1393-12-23 18:05
با سلام و خسته نباشید
طبق مطلبی که سایت منبع شما گذاشته ظاهراً باید برای شبه عناصر از (::) استفاده بشه.چون از (:) در css1 و css2 برای شبه عناصر و شبه کلاسها به طور همزمان استفاده می شده اما در css3 دیگه کاربرد نداره و باید (::) باشه .
خیلی ممنون از سایت خوبتون موفق باشید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:

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

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