شبه عناصر

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

شبه عناصر چه چیزی هستند؟

یک شبه عنصر برای استایل دهی بخش مشخصی از یک عنصر استفاده می‌شود.[۱]

برای مثال، می‌توان از آن برای موارد زیر استفاده کرد:

  • استایل دهی حرف اول، یا خط اول یک عنصر
  • واردکردن محتوا در قبل، یا بعد از محتوای یک عنصر

شیوه نوشتار شبه عناصر

1 selector::pseudo-element {
2   property:value;
3 }


شبه عنصر ::first-line

شبه عنصر ::first-line برای اضافه‌کردن یک استایل مخصوص به اولین خط متن استفاده می‌شود.

مثال زیر خط اول متن در تمامی عناصر <p> را قالب بندی می‌کند:

مثال
1 p::first-line {
2   color: #ff0000;
3   font-variant: small-caps;
4 }


نکته: شبه عنصر ::first-line تنها روی عناصر block-level قابل اعمال است.

ویژگی‌های زیر را می‌توان روی شبه عنصر ::first-line اعمال کرد:

  • ویژگی‌های قلم
  • ویژگی‌های رنگ
  • ویژگی‌های پس زمینه
  • فاصله گذاری بین کلمات
  • فاصله گذاری بین حروف
  • قالب بندی متن
  • تراز بندی عمودی
  • تبدیل (به انگلیسی: transform) متن
  • ارتفاع خط
  • ویژگی clear

به دو علامت دو نقطه (::) توجه کنید - ::first-line در برابر :first-line

علامت دو :: با علامت : برای شبه کلاس‌ها در CSS3 جایگزین شد. این تصمیم از سوی W3C بود تا تفاوت بین شبه کلاسها و شبه عنصرها مشخص شود.

شیوه نوشتار تک علامت : هم برای شبه کلاس‌ها و هم شبه عناصر در CSS2 و CSS1 استفاده می‌شد.

برای سازگاری نسخه‌های قبلی، شیوه نوشتار تک علامتی : برای شبه عناصر CSS2 و CSS1 قابل قبول است.

شبه عنصر ::first-letter

شبه عنصر ::first-letter برای اضافه‌کردن استایل به خصوصی به اولین حرف یک متن استفاده می‌شود.

مثال زیر اولین حرف از متن تمامی عناصر <p> را قالب بندی می‌کند.

مثال
1 p::first-letter {
2   color: #ff0000;
3   font-size: xx-large;
4 }


ویژگی‌های زیر روی شبه عنصر ::first-letter اعمال می‌شوند:

  • ویژگی‌های قلم
  • ویژگی‌های رنگ
  • ویژگی‌های پس زمینه
  • ویژگی‌های حاشیه
  • ویژگی‌های padding
  • ویژگی‌های کادر
  • قالب بندی متن
  • تراز عمودی (تنها در صورتی که مقدار ویژگی "float" برابر با "none" باشد)
  • تبدیل متن
  • ارتفاع خط
  • ویژگی float
  • ویژگی clear

شبه عناصر و کلاسهای CSS

شبه عناصر می‌توانند با کلاسهای CSS ترکیب شوند:

مثال
1 p.intro::first-letter {
2   color: #ff0000;
3   font-size:200%;
4 }


مثال بالا حرف اول پاراگراف‌هایی با کلاس "intro" را به رنگ قرمز و در اندازه بزرگ نمایش می‌دهد.

چندین شبه عنصر

چندین شبه عنصر می‌توانند با یک دیگر ترکیب شوند.

در مثال زیر، اولین حرف یک پاراگراف قرمز رنگ، و در اندازه خیلی بزرگ (به انگلیسی: xx-large) خواهد بود. باقی مانده خط اول آبی، و به صورت حروف کوچک خواهد بود. رنگ و قلم مابقی پاراگراف به صورت پیش‌فرض خواهد بود:

مثال
1 p::first-letter {
2   color: #ff0000;
3   font-size: xx-large;
4 }
5 
6 p::first-line {
7   color: #0000ff;
8   font-variant: small-caps;
9 }


CSS - شبه عنصر ::before

شبه عنصر ::before را می‌توان برای واردکردن متن قبل از محتوای یک عنصر استفاده کرد.

مثال زیر یک تصویر را قبل از محتوای هر عنصر <h1> وارد می‌کند.

مثال
1 h1::before {
2   content: url(smiley.gif);
3 }


CSS - شبه عنصر ::after

شبه عنصر ::after را می‌توان برای واردکردن محتوا بعد از محتوای یک عنصر استفاده کرد.

مثال زیر یک تصویر را بعد از محتوای عر عنصر <h1> وارد می‌کند.

مثال
1 h1::after {
2   content: url(smiley.gif);
3 }


CSS - شبه عنصر ::selection

شبه عنصر ::selection بخشی از عنصر را که کاربر انتخاب کرده‌است تطبیق می‌دهد.

ویژگی‌های CSS رو به رو می‌توانند بر روی شبه عنصر ::selection اعمال شوند: ویژگی color، ویژگی background، ویژگی cursor، و ویژگی outline.

مثال زیر متن انتخاب شده را به رنگ قرمز بر روی پس زمینه زرد رنگ تبدیل می‌کند:

مثال
1 ::selection {
2   color: red;
3   background: yellow;
4 }


خود را با تمرین‌ها آزمایش کنید!

تمامی شبه عناصر 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 تمامی لینک‌های بازدید شده را انتخاب می کند


منابع آموزشی