شبه عناصر در CSS
شبه عناصر (pseudo-elements)
شبه عناصر در CSS برای اضافه کردن Styleهای خاص، به بعضی از Selectorها استفاده می شود.
در واقع از شبه عناصر (pseudo-element) برای استایل دهی بخشی از یک عنصر استفاده می شود.
برخی از استفاده های شبه عناصر:
- از شبه عناصر می توان برای استایل دهی اولین کاراکتر (first-letter) و یا اولین خط (first-line) یک پاراگراف استفاده نمود.
- می تون از آن برای اضافه کردن یک محتوای دلخواه قبل (before) و یا بعد (after) از یک عنصر استفاده نمود.
نحوه استفاده از شبه عناصر
در CSS همچنین می توان کلاس ها را همراه شبه عناصر به کار برد:
شبه عنصر first-line:
این شبه عنصر برای اضافه کردن یک Style خاص بر روی اولین خط یک متن استفاده می شود.
در مثال زیر، خصوصیت color و font-variant روی اولین خط پاراگراف (عنصر p) اعمال می شود:
توجه: شبه عنصر first-line تنها با عناصر block می تواند استفاده شود.
توجه: خصوصات زیر برای شبه عنصر first-line بکار برده می شوند:
- font
- float
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
شبه عنصر first-letter:
برای اضافه کردن یک style خاص روی اولین حرف یک متن استفاده می شود:
توجه: شبه عنصر first-letter تنها با عناصر block می تواند استفاده شود.
توجه: خصوصات زیر برای شبه عنصر first-letter بکار برده می شوند:
- font
- float
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (اگر خصوصیت font با مقدار none تنظیم شده باشد)
- text-transform
- line-height
- float
- clear
کلاس ها و شبه عناصر
شبه عناصر را می توان با کلاس ها ترکیب کرد:
<p class="article">A paragraph in an article</p>
در مثال بالا، حرف اول تمام پاراگراف هایی که کلاس آنها "article" است به رنگ قرمز نمایش داده خواهد شد.
اعمال شبه عناصر مختلف روی عنصر p
شبه عناصر می توانند با یکیدگر ترکیب شوند.
در مثال زیر، اولین حرف تمام پاراگراف ها با رنگ قرمز و اندازه آن با مقدار "xx-large" تنظیم شده است، همچنین باقیمانده خط اول، نیز با رنگ آبی و خصوصیت font-variant آنها با مقدار "small-caps" تنظیم شده است:
مثال (شبه عناصر در CSS)
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
شبه عنصر before:
برای اضافه کردن یک محتوی دلخواه، قبل از یک عنصر استفاده می شود.
در مثال زیر، قبل از هر تگ <h1> در صفحه HTML ، عکس "smiley.gif" درج می شود:
شبه عنصر after:
برای اضافه کردن یک محتوی دلخواه، بعد از یک عنصر استفاده می شود.
در مثال زیر، بعد از هر تگ <h1> در صفحه HTML ، عکس "smiley.gif" درج می شود:
شبه عنصر selection:: در CSS
با استفاده از شبه عنصر selection:: می توانید، قسمت هایی از متن که توسط کاربر انتخاب می شود را استایل دهی نمایید.
خصوصیاتی که می توان همراه با شبه کلاس selection:: استفاده نمود عبارت اند از:
در مثال زیر، زمانی که کاربر قسمتی از متن را انتخاب می کند، رنک پس زمینه و فونت قسمت انتخاب شده، بترتیب زرد و قرمز خواهد شد:
کلیه شبه کلاس ها و شبه عناصر در CSS
در جدول زیر کلیه شبه کلاس ها در 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 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 27122