مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش قبلی ما شبه کلاس ها را در CSS بررسی کردیم و ساختار کلی و کاربردهای هر یک را نیز نشان دادیم. همچنین در آخر این بخش لیستی از شبه کلاس ها و pseudo-element (شبه عناصر) در CSS را ارائه دادیم. در این بخش قصد داریم به بررسی pseudo-element در CSS پرداخته و جزئیات مربوط به این مبحث را بررسی کنیم. همانطور که در بخش قبلی اشاره کردیم شبه کلاس ها برای اعمال Style به عناصر وضعیت های مختلف عناصر و عناصر مرتبط با هم استفاده می شود، در حالیکه شبه عناصر در CSS برای اعمال Style به قسمت های مشخص شده ی یک عنصر بکار می رود، برای آشنایی بیشتر با آموزش pseudo-element در CSS در ادامه ی این مبحث با ما همراه باشید.
شبه عناصر در CSS
در این آموزش شما را با انواع pseudo-element در CSS ، ساختار و کاربردهای هر یک آشنا می کنیم.
pseudo-element در CSS چیست
pseudo-element ( شبه کلاس در CSS ) برای اعمال Style در قسمت های انتخابی یک عنصر بکار می رود.
برای مثال نمونه هایی از کاربردهای شبه کلاس در CSS به شرح زیر است:
- اعمال یک Style به اولین حرف یا اولین خط یک عنصر مشخص.
- اعمال Style یا درج محتوا به قبل یا بعد از محتوای یک عنصر مشخص.
ساختار
ساختار کلی استفاده از pseudo-element در CSS:
مثال :
| selector::pseudo-element { property:value; } |
توجه داشته باشید برای استفاده از شبه کلاس سعی کنید، از دابل کولون (” : : “) استفاده کنید.
به عنوان مثال از ::first-line بجای:first-line استفاده کنید.
اینکار بیشتر برای تمایز شبه عناصر از شبه کلاس در CSS3 توصیه شده است.
در CSS2 و CSS1 در هر دو مورد شبه کلاس و شبه عناصر از تک کولون (” : “) استفاده می شود.
شبه عنصر first-line
شبه عنصر ::first-line برای اعمال یک Style خاص به اولین خط از متن یک عنصر مشخص استفاده می شود.
مثال زیر به خط اول متن در تمام عناصر <p> یک Style می دهد:
مثال : شبه عنصر firstline
| p::first-line { color: #ff0000; font-variant: small-caps; } |
نکته : شبه عنصر ::first-line را فقط می توان به عناصر سطح block اعمال کرد.
خصوصیات زیر از یک عنصر را می توان با شبه عنصر ::first-line تعریف کرد:
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
شبه عنصر first-letter
شبه عنصر ::first-letter برای افزودن یک Style خاص به حرف اول متن یک عنصر استفاده می شود.
مثال زیر چگونگی style حرف اول تمام متن عناصر <p> را نشان می دهد:
مثال : شبه عنصر firstletter
| p::first-letter { color: #ff0000; font-size: xx-large; } |
نکته : شبه عنصر ::first-letter فقط به عناصر block اعمال می شود.
خصوصیات زیر در عناصر html را می توان با در شبه کلاس ::first-letter تعریف کرد:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (فقط زمانی که float مقدار “none” داشته باشد)
- text-transform
- line-height
- float
- clear
شبه عنصر و کلاس های CSS
pseudo-element در CSS را می توان با کلاس ها تعریف کرد:
مثال : شبه عنصر first-letter
| p.intro::first-letter { color: #ff0000; font-size:200%; } |
مثال فوق اولین حرف از پاراگراف class="intro" را Style می دهد.
شبه عناصر چندگانه
می توان شبه عناصر در CSS را با هم ترکیب کرد.
در مثال زیر اولین حرف از متن یک پاراگراف قرمز و با اندازه بزرگ نمایش داده می شود و مابقی خط اول به رنگ آبی و اندازه متن کوچک نمایش داده می شود:
مثال : شبه عنصر first-letter نمونه 2
| p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; } |
شبه عنصر before
از شبه کلاس ::before برای درج محتوا به قبل از محتوای یک عنصر مشخص استفاده می شود.
مثال زیر قبل از عنصر <h1> یک تصویر قرار می دهد:
شبه عنصر after
شبه عنصر after محتوایی را بعد از عنصر مشخص درج می کند.
مثال زیر یک تصویر بعد از عنصر <h1> درج می کند:
شبه عنصر selection
شبه عنصر ::selection قسمتی از محتوای یک عنصر مشخص را که کاربر انتخاب می کند style می دهد.
این شبه عنصر می تواند به خصوصیات : color, background, cursor و outline عناصر html اعمال شود.
مثال زیر قسمتی رنگ پس زمینه ی آن بخش از متن را که توسط کاربر انتخاب می شود را به رنگ زرد و متن آن را قرمز می کند:
تمام عناصر شبه کلاس در CSS
| انتخابگر | مثال | توضیح مثال |
|---|
::after | p::after | محتوای را بعد از هر عنصر <p> وارد می کند. |
::before | p::before | محتوایی را قبل از هر عنصر <p> اضافه می کند. |
::first-letter | p::first-letter | اولین حرف از هر عنصر <p> را انتخاب می کند. |
::first-line | p::first-line | خط اول هر عنصر <p> را انتخاب می کند. |
::selection | p::selection | بخشی از یک عنصر را انتخاب می کند که توسط یک کاربر انتخاب می کند. |
لیست تمام شبه کلاس های CSS
| انتخابگر | مثال | توضیحات مثال |
|---|
:active | a:active | لینک فعال را انتخاب می کند. |
:checked | input:checked | هر عنصر <input> چک شده را انتخاب می کند. |
:disabled | input:disabled | هر عنصر <input> غیرفعال را انتخاب می کند. |
:empty | p:empty | هر عنصر <p> که فرزندی ندارد را انتخاب می کند. |
:enabled | input:enabled | هر عنصر <input> فعال را انتخاب می کند. |
:first-child | p:first-child | هر عنصر <p> که اولین فرزند عنصر والد خود است را انتخاب می کند. |
:first-of-type | p:first-of-type | هر عنصر <p> که اولین عنصر <p> عنصر والد خود است را انتخاب می کند. |
:focus | input:focus | عنصر <input> که آماده ویرایش است،را انتخاب می کند. |
:hover | a:hover | عناصر زیر اشاره گر ماوس را انتخاب می کند. |
:in-range | input:in-range | عناصر <input> را با یک مقدار در محدوده مشخصی انتخاب می کند. |
:invalid | input:invalid | تمام عناصر <input> با مقدار نامعتبر را انتخاب می کند. |
:lang(language) | (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> را انتخاب می کند که عنصر <p> دوم از پدر و مادرش است، شمارش از آخرین فرزند است. |
:nth-of-type(n) | (p:nth-of-type(2 | هر عنصر <p> که عنصر <p> دوم از عنصر والدش است را انتخاب می کند. |
:only-of-type | p:only-of-type | هر عنصر <p> که تنها عنصر <p> والدش است را انتخاب می کند. |
:only-child | p:only-child | هر عنصر <p> را انتخاب می کند که تنها فرزند عنصر والدش است. |
:optional | input:optional | عناصر <input> را بدون هیچ ویژگی «مورد نیاز» انتخاب می کند. |
: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> را با یک ویژگی “مورد نیاز” مشخص می کند. |
:root | root | عنصر ریشه سند را انتخاب می کند. |
:target | #news:target | عنصر فعلی #news فعال را انتخاب می کند. |
:valid | input:valid | تمام عناصر <input> با یک مقدار معتبر را انتخاب می کند. |
:visited | a:visited | تمام لینک های بازدید شده را انتخاب می کند. |
کلام آخر
در بخش قبلی شبه کلاس ها را ارائه دادیم که برای تعریف style روی رویدادهایی از عناصر و عناصر مرتبط با یک عنصر استفاده می شد. در این بخش به بررسی شبه عناصر در CSS که به قسمتی از یک عنصر style دلخواه را اعمال می کند پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
علی
با سلام
چرا بخش ” خودتان امتحان کنید” کار نمی کنه؟
باتشکر
پی وی لرن
سلام
کدام یک از خودتان امتحان کنید ها کار نمی کنند چند مورد بررسی شد مشکل نداشته اند.