شبه عناصر
محتویات
- ۱ شبه عناصر چه چیزی هستند؟
- ۲ شیوه نوشتار شبه عناصر
- ۳ شبه عنصر ::first-line
- ۴ شبه عنصر ::first-letter
- ۵ شبه عناصر و کلاسهای CSS
- ۶ چندین شبه عنصر
- ۷ CSS - شبه عنصر ::before
- ۸ CSS - شبه عنصر ::after
- ۹ CSS - شبه عنصر ::selection
- ۱۰ خود را با تمرینها آزمایش کنید!
- ۱۱ تمامی شبه عناصر CSS
- ۱۲ تمامی شبه کلاسهای CSS
- ۱۳ منابع آموزشی
شبه عناصر چه چیزی هستند؟
یک شبه عنصر برای استایل دهی بخش مشخصی از یک عنصر استفاده میشود.[۱]
برای مثال، میتوان از آن برای موارد زیر استفاده کرد:
- استایل دهی حرف اول، یا خط اول یک عنصر
- واردکردن محتوا در قبل، یا بعد از محتوای یک عنصر
شیوه نوشتار شبه عناصر
شبه عنصر ::first-line
شبه عنصر ::first-line
برای اضافهکردن یک استایل مخصوص به اولین خط متن استفاده میشود.
مثال زیر خط اول متن در تمامی عناصر <p> را قالب بندی میکند:
نکته: شبه عنصر ::first-line
تنها روی عناصر block-level قابل اعمال است.
ویژگیهای زیر را میتوان روی شبه عنصر ::first-line
اعمال کرد:
- ویژگیهای قلم
- ویژگیهای رنگ
- ویژگیهای پس زمینه
- فاصله گذاری بین کلمات
- فاصله گذاری بین حروف
- قالب بندی متن
- تراز بندی عمودی
- تبدیل (به انگلیسی: transform) متن
- ارتفاع خط
- ویژگی clear
به دو علامت دو نقطه (::) توجه کنید - ::first-line
در برابر :first-line
علامت دو :: با علامت : برای شبه کلاسها در CSS3 جایگزین شد. این تصمیم از سوی W3C بود تا تفاوت بین شبه کلاسها و شبه عنصرها مشخص شود.
شیوه نوشتار تک علامت : هم برای شبه کلاسها و هم شبه عناصر در CSS2 و CSS1 استفاده میشد.
برای سازگاری نسخههای قبلی، شیوه نوشتار تک علامتی : برای شبه عناصر CSS2 و CSS1 قابل قبول است.
شبه عنصر ::first-letter
شبه عنصر ::first-letter
برای اضافهکردن استایل به خصوصی به اولین حرف یک متن استفاده میشود.
مثال زیر اولین حرف از متن تمامی عناصر <p> را قالب بندی میکند.
ویژگیهای زیر روی شبه عنصر ::first-letter
اعمال میشوند:
- ویژگیهای قلم
- ویژگیهای رنگ
- ویژگیهای پس زمینه
- ویژگیهای حاشیه
- ویژگیهای padding
- ویژگیهای کادر
- قالب بندی متن
- تراز عمودی (تنها در صورتی که مقدار ویژگی "float" برابر با "none" باشد)
- تبدیل متن
- ارتفاع خط
- ویژگی float
- ویژگی clear
شبه عناصر و کلاسهای CSS
شبه عناصر میتوانند با کلاسهای CSS ترکیب شوند:
مثال بالا حرف اول پاراگرافهایی با کلاس "intro" را به رنگ قرمز و در اندازه بزرگ نمایش میدهد.
چندین شبه عنصر
چندین شبه عنصر میتوانند با یک دیگر ترکیب شوند.
در مثال زیر، اولین حرف یک پاراگراف قرمز رنگ، و در اندازه خیلی بزرگ (به انگلیسی: xx-large) خواهد بود. باقی مانده خط اول آبی، و به صورت حروف کوچک خواهد بود. رنگ و قلم مابقی پاراگراف به صورت پیشفرض خواهد بود:
CSS - شبه عنصر ::before
شبه عنصر ::before
را میتوان برای واردکردن متن قبل از محتوای یک عنصر استفاده کرد.
مثال زیر یک تصویر را قبل از محتوای هر عنصر <h1> وارد میکند.
CSS - شبه عنصر ::after
شبه عنصر ::after
را میتوان برای واردکردن محتوا بعد از محتوای یک عنصر استفاده کرد.
مثال زیر یک تصویر را بعد از محتوای عر عنصر <h1> وارد میکند.
CSS - شبه عنصر ::selection
شبه عنصر ::selection
بخشی از عنصر را که کاربر انتخاب کردهاست تطبیق میدهد.
ویژگیهای CSS رو به رو میتوانند بر روی شبه عنصر ::selection
اعمال شوند: ویژگی color
، ویژگی background
، ویژگی cursor
، و ویژگی outline
.
مثال زیر متن انتخاب شده را به رنگ قرمز بر روی پس زمینه زرد رنگ تبدیل میکند:
خود را با تمرینها آزمایش کنید!
تمامی شبه عناصر CSS
انتخابگر (به انگلیسی: Selector) | مثال | توضیح مثال |
---|---|---|
::after | p::after | چیزی را بعد از محتوای هر عنصر <p> وارد میکند |
::before | p::before | چیزی را قبل از محتوای هر عنصر <p> وارد میکند |
::first-letter | p::first-letter | حرف اول هر عنصر <p> را انتخاب میکند |
::first-line | p::first-line | خط اول هر عنصر <p> را انتخاب میکند |
::selection | p::selection | بخشی از عنصری که کاربر انتخاب کرده را انتخاب میکند |
تمامی شبه کلاسهای CSS
انتخابگر (به انگلیسی: Selector) | مثال | توضیح مثال |
---|---|---|
:active | a:active | لینک فعال را انتخاب میکند |
:checked | input:checked | همه عنصرهای <input> علامتدار (به انگلیسی: Checked) را انتخاب میکند |
:disabled | input:disabled | همه عنصرهای <input> غیرفعال را انتخاب میکند |
:empty | p:empty | هر عنصر <p> فاقد فرزند را انتخاب میکند |
:enabled | input:enabled | هر عنصر <p> فعال را انتخاب میکند |
:first-child | p:first-child | هر عنصر <p> که اولین فرزند والدش است را انتخاب میکند |
:first-of-type | p:first-of-type | هرعنصر <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> که دومین عنصر والد خود، از آخر است را انتخاب میکند |
:nth-of-type(n) | p:nth-of-type(2) | هر عنصر <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 | تمامی لینکهای بازدید شده را انتخاب می کند |
منابع آموزشی