با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش قبلی ما شبه کلاس ها را در CSS بررسی کردیم و ساختار کلی و کاربردهای هر یک را نیز نشان دادیم. همچنین در آخر این بخش لیستی از شبه کلاس ها و pseudo-element (شبه عناصر) در CSS را ارائه دادیم. در این بخش قصد داریم به بررسی pseudo-element در CSS پرداخته و جزئیات مربوط به این مبحث را بررسی کنیم. همانطور که در بخش قبلی اشاره کردیم شبه کلاس ها برای اعمال Style به عناصر وضعیت های مختلف عناصر و عناصر مرتبط با هم استفاده می شود، در حالیکه شبه عناصر در CSS برای اعمال Style به قسمت های مشخص شده ی یک عنصر بکار می رود، برای آشنایی بیشتر با آموزش pseudo-element در CSS در ادامه ی این مبحث با ما همراه باشید.
در این آموزش شما را با انواع pseudo-element در CSS ، ساختار و کاربردهای هر یک آشنا می کنیم.
pseudo-element ( شبه کلاس در CSS ) برای اعمال Style در قسمت های انتخابی یک عنصر بکار می رود.
برای مثال نمونه هایی از کاربردهای شبه کلاس در CSS به شرح زیر است:
ساختار کلی استفاده از pseudo-element در CSS:
1 2 3 | selector::pseudo-element { property:value; } |
توجه داشته باشید برای استفاده از شبه کلاس سعی کنید، از دابل کولون (” : : “) استفاده کنید.
به عنوان مثال از ::first-line
بجای:first-line
استفاده کنید.
اینکار بیشتر برای تمایز شبه عناصر از شبه کلاس در CSS3 توصیه شده است.
در CSS2 و CSS1 در هر دو مورد شبه کلاس و شبه عناصر از تک کولون (” : “) استفاده می شود.
شبه عنصر ::first-line
برای اعمال یک Style خاص به اولین خط از متن یک عنصر مشخص استفاده می شود.
مثال زیر به خط اول متن در تمام عناصر <p> یک Style می دهد:
1 2 3 4 | p::first-line { color: #ff0000; font-variant: small-caps; } |
نکته : شبه عنصر ::first-line
را فقط می توان به عناصر سطح block اعمال کرد.
خصوصیات زیر از یک عنصر را می توان با شبه عنصر ::first-line
تعریف کرد:
شبه عنصر ::first-letter
برای افزودن یک Style خاص به حرف اول متن یک عنصر استفاده می شود.
مثال زیر چگونگی style حرف اول تمام متن عناصر <p> را نشان می دهد:
1 2 3 4 | p::first-letter { color: #ff0000; font-size: xx-large; } |
نکته : شبه عنصر ::first-letter
فقط به عناصر block اعمال می شود.
خصوصیات زیر در عناصر html را می توان با در شبه کلاس ::first-letter
تعریف کرد:
pseudo-element در CSS را می توان با کلاس ها تعریف کرد:
1 2 3 4 | p.intro::first-letter { color: #ff0000; font-size:200%; } |
مثال فوق اولین حرف از پاراگراف class="intro"
را Style می دهد.
می توان شبه عناصر در CSS را با هم ترکیب کرد.
در مثال زیر اولین حرف از متن یک پاراگراف قرمز و با اندازه بزرگ نمایش داده می شود و مابقی خط اول به رنگ آبی و اندازه متن کوچک نمایش داده می شود:
1 2 3 4 5 6 7 8 9 | p::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; } |
از شبه کلاس ::before برای درج محتوا به قبل از محتوای یک عنصر مشخص استفاده می شود.
مثال زیر قبل از عنصر <h1> یک تصویر قرار می دهد:
شبه عنصر after محتوایی را بعد از عنصر مشخص درج می کند.
مثال زیر یک تصویر بعد از عنصر <h1> درج می کند:
شبه عنصر ::selection
قسمتی از محتوای یک عنصر مشخص را که کاربر انتخاب می کند style می دهد.
این شبه عنصر می تواند به خصوصیات : color
, background
, cursor
و outline
عناصر html اعمال شود.
مثال زیر قسمتی رنگ پس زمینه ی آن بخش از متن را که توسط کاربر انتخاب می شود را به رنگ زرد و متن آن را قرمز می کند:
انتخابگر | مثال | توضیح مثال |
---|---|---|
::after | p::after | محتوای را بعد از هر عنصر <p> وارد می کند. |
::before | p::before | محتوایی را قبل از هر عنصر <p> اضافه می کند. |
::first-letter | p::first-letter | اولین حرف از هر عنصر <p> را انتخاب می کند. |
::first-line | p::first-line | خط اول هر عنصر <p> را انتخاب می کند. |
::selection | p::selection | بخشی از یک عنصر را انتخاب می کند که توسط یک کاربر انتخاب می کند. |
انتخابگر | مثال | توضیحات مثال |
---|---|---|
: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 دلخواه را اعمال می کند پرداختیم.
علی
با سلام
چرا بخش ” خودتان امتحان کنید” کار نمی کنه؟
باتشکر
پی وی لرن
سلام
کدام یک از خودتان امتحان کنید ها کار نمی کنند چند مورد بررسی شد مشکل نداشته اند.