سبد (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

آموزش صوتی CSS

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

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

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