شبه کلاسها
محتویات
- ۱ شبه کلاسها چه چیزی هستند؟
- ۲ شیوه نوشتار
- ۳ شبه کلاس Anchor
- ۴ شبه کلاسها و کلاسهای CSS
- ۵ قرار دادن نشانهگر موس (به انگلیسی: Hover) روی <div>
- ۶ Tooltip ساده در هنگام قرارگیری موس روی کنترل
- ۷ CSS - شبه کلاس :first-child
- ۸ تطبیق اولین عنصر <p>
- ۹ تطبیق دادن اولین عنصر <i> در تمامی عناصر <p>
- ۱۰ تطبیق دادن تمام عناصر <i> در تمامی فرزند عناصر <p>
- ۱۱ CSS - شبه کلاس :lang
- ۱۲ مثالهای بیشتر
- ۱۳ خود را با تمرینها امتحان کنید!
- ۱۴ تمامی شبه کلاسهای CSS
- ۱۵ تمامی شبیه عنصرها در CSS
- ۱۶ منابع آموزشی
شبه کلاسها چه چیزی هستند؟
یک شبه کلاس برای تعریف وضعیت ویژه یک عنصر تعریف میشود.[۱]
برای مثال، میتوان برای انجام موارد زیر از شبه کلاس استفاده کرد:
- استایل دهی یک عنصر برای زمانی که نشانهگر موس روی آن قرار میگیرد
- استایل دهی متفاوت لینکهای بازدید شده و بازدید نشده
- استایل دیک عنصر هنگامی که انتخاب میشود
شیوه نوشتار
شیوه نوشتار شبه کلاسها:
شبه کلاس Anchor
لینکها را میتوان به شیوههای گوناگون نمایش داد:
نکته: a:hover
میبایست بعد از تعریف a:link
و a:visited
نوشته شود تا اثر بخش باشد! تعریف a:hover
میبایست بعد a:active
باشد تا اثر بخش باشد! نام شبه کلاسها حساس به حروف کوچک و بزرگ نیستند.
شبه کلاسها و کلاسهای CSS
شبه کلاسها میتوانند با کلاسهای CSS ترکیب شوند:
زمانی که شما نشانهگر موس خود را روی لینک مثال زیر قرار میدهید، رنگ لینک را تغییر خواهد داد:
قرار دادن نشانهگر موس (به انگلیسی: Hover) روی <div>
مثالی از استفاده شبه کلاس :hover
روی یک عنصر <div> :
Tooltip ساده در هنگام قرارگیری موس روی کنترل
قرار دادن نشانهگر موس روی یک عنصر برای نمایش یک عنصر <p> (مانند یک tooltip):
نشانهگر موس را روی من ببرید تا عنصر <p> را نمایش دهم.
ساخت نمونه مثال این بخش در دست اقدام است.
CSS - شبه کلاس :first-child
شبه کلاس :first-child
عنصر خاصی که فرزند اول عنصر دیگر است را تطبیق میدهد.
تطبیق اولین عنصر <p>
در مثال زیر ، انتخابگر تمامی عناصر <p> را که اولین فرزند هر عنصر دیگری باشند را تطبیق میدهد:
تطبیق دادن اولین عنصر <i> در تمامی عناصر <p>
در مثال زیر ، انتخابگر اولین عنصر <i> را در تمامی عناصر <p> تطبیق میدهد:
تطبیق دادن تمام عناصر <i> در تمامی فرزند عناصر <p>
در مثال زیر ، انتخابگر تمام عناصر <i> در تمامی عناصر <p> که فرزند اول عنصری دیگر هستند تطبیق میدهد:
CSS - شبه کلاس :lang
شبه کلاس :lang
به شما این اجازه را میدهد که قوانین مخصوصی را برای زبانهای متفاوت تعریف کنید.
در مثال زیر، :lang
علامت نقل قول " " را برای عناصر <q> با مقدار ویژگی lang=”no” تعریف میکند:
مثالهای بیشتر
اضافهکردن استایلهای متفاوت به لینکها
این مثال نحوه اضافهکردن استایل به لینکها را نمایش میدهد.
این مثال نحوه استفاده از شبه کلاس :focus را نمایش میدهد.
خود را با تمرینها امتحان کنید!
تمامی شبه کلاسهای CSS
انتخابگر | مثال | توضیح مثال |
---|---|---|
:active | a:active | لینکهای فعال را انتخاب میکند |
:checked | input:checked | هر عنصر <input> علامتدار (به انگلیسی: Checked) را انتخاب میکند |
:disabled | input:disabled | هر عنصر <input> غیرفعال را انتخاب میکند |
:empty | p:empty | هر عنصر <p> که هیچ فرزندی ندارد را انتخاب میکند |
:enabled | input:enabled | هر عنصر <input> فعال شده را انتخاب میکند |
:first-child | p:first-child | هر عنصر <p> را که اولین فرزند والد خود است را ، انتخاب میکند |
:first-of-type | p:first-of-t | هر عنصر <p> که اولین عنصر <p> والد خود است را انتخاب میکند |
:focus | input:focus | عنصر <input> را که انتخاب شده (focus دارد) ، انتخاب میکند |
:hover | a:hover | لینکها را در زمانی که نشانهگر موس روی آنها قرار میگیرد را انتخاب میکند |
:in-range | input:in-range | عناصر <input> با مقداری که در محدوده به خصوص هستند را انتخاب میکند |
:invalid | input:invalid | تمام عناصر <input> را که مقداری نامعتبر دارند را انتخاب میکند |
:lang(language) | p:lang(it) | همه عناصر <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> ای را که خاصیت "required" ندارند را انتخاب میکند |
: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> را که خاصیت "required" آنها مشخص شدهاست را انتخاب میکند |
:root | root | عنصر ریشه سند را انتخاب میکند |
:target | #news:target | عنصر #news فعال جاری را انتخاب میکند (کلیک بر روی یک url که حاوی نام anchor است) |
:valid | input:valid | تمامی عناصر <input> را که مقدار معتبر دارند انتخاب میکند |
:visited | a:visited | تمامی لینکهای بازدید شده را انتخاب میکند |
تمامی شبیه عنصرها در CSS
انتخابگر | مثال | توضیح مثال |
---|---|---|
::after | p::after | محتوا را بعد از هر عنصر <p> وارد میکند |
::before | p::before | محتوا را قبل از هر عنصر <p> وارد میکند |
::first-letter | p::first-letter | اولین حرف از هرعنصر <p> را انتخاب میکند |
::first-line | p::first-line | اولین خط هر عنصر <p> را انتخاب میکند |
::selection | p::selection | بخشی از عنصری که کاربر توسط کاربر انتخاب میشود را انتخاب میکند |
منابع آموزشی