با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در طراحی یک وب سایت در مواردی به احتمال زیاد نیاز خواهید داشت که برای رویدادهای مهم یک عنصر در CSS یک Style خاص را تعریف کنید، به عنوان مثال در مواردی نیاز دارید که با حرکت اشاره گر ماوس روی یک عنصر رنگ پس زمینه یا فونت و… تغییر کند. برای چنین کارهایی Pseudo-classes ( شبه کلاس ها در CSS ) ارائه شده است. با استفاده از قابلیت های Pseudo-classes در CSS برای تعریف Style برای رویدادهای مهم عناصر بسیار ساده است. برای آشنایی بیشتر با چگونگی کار با شبه کلاس ها در CSS در ادامه این بخش با ما همراه باشید.
در این آموزش ما شما را با طرز استفاده از Pseudo-classes در CSS و انواع آن آشنا می کنیم.
شبه کلاس ها در CSS برای تعریف style در رویدادها و وضعیت های مختلف عناصر استفاده می شود.
به عنوان مثال Pseudo-classes در CSS می تواند برای موارد زیر استفاده شود:
ساختار استفاده از pseudo-classes در CSS :
1 2 3 | selector:pseudo-class { property:value; } |
شبه کلاس هایی زیر دسترسی وضعیت های مختلف لینک در CSS را نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* unvisited link */ a:link { color: #FF0000; } /* visited link */ a:visited { color: #00FF00; } /* mouse over link */ a:hover { color: #FF00FF; } /* selected link */ a:active { color: #0000FF; } |
نکته : شبه کلاس a:hover
حتما باید بعد از شبه کلاس های a:link
وa:visited
در CSS تعریف شود.
شبه کلاس a:active
برای موثر بودن حتما باید بعد از a:hover
تعریف شود.
Pseudo-classes را می توان با CSS classes ترکیب کرد.
در مثال زیر با حرکت اشاره گر ماوس روی عنصر ، رنگ عنصر تغییر می کند:
مثال زیر طرز استفاده از شبه کلاس :hover را در عنصر div نشان می دهد:
در مثال زیر با حرکت ماوس روی <div> یک عنصر <p> ظاهر می شود:
1 2 3 4 5 6 7 8 9 | p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; } |
شبه کلاس :first-child
اگر چند عنصر هم نام مثلا چند عنصر <p> در یک عنصر والد باشد، اولین عنصر فرزند را انتخاب می کند.
در مثال زیر رنگ قلم اولین عنصر <p> فرزند به رنگ آبی در می آید:
مثال زیر رنگ قلم اولین عنصر <i> در تمام عناصر <p> را آبی می کند:
مثال زیر تمامی عناصر <i> داخل اولین عنصر فرزند <p> را style می دهد:
1 2 3 | p:first-child i { color: blue; } |
شبه کلاس lang به شما اجازه می دهد تا برای زبان های خاصی در یک عنصر Style تعریف کنید.
مثال زیر یک عبارت را بین دو کاراکتر “~” قرار می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <html> <head> <style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> </body> </html> |
انتخابگر | مثال | توضیحات مثال |
---|---|---|
: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 | تمام لینک های بازدید شده را انتخاب می کند. |
انتخابگر | مثال | توضیح مثال |
---|---|---|
::after | p::after | محتوای را بعد از هر عنصر <p> وارد می کند. |
::before | p::before | محتوایی را قبل از هر عنصر <p> اضافه می کند. |
::first-letter | p::first-letter | اولین حرف از هر عنصر <p> را انتخاب می کند. |
::first-line | p::first-line | خط اول هر عنصر <p> را انتخاب می کند. |
::selection | p::selection | بخشی از یک عنصر را انتخاب می کند که توسط یک کاربر انتخاب می کند. |
شبه کلاس ها در CSS به شما کمک می کنند تا هم برای رویدادهای مختلف نظیر جرکت ماوس روی عناصر style تعریف کنید و هم به عناصر مرتبط در سند دسترسی داشته باشید.