شبه عناصر (Pseudo-element) در CSS

CSS Pseudo Elements

0 330

شبه عنصر (pseudo-element)

شبه عناصر یا pseudo-element ها در زبان CSS برای استایل دهی به بخش خاصی از یک عنصر استفاده می شوند. به طور مثال:

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

ساختار کلی شبه عنصرها به این شکل است:

در این ساختار باید حواستان به دو علامت دو نقطه (::) باشد. در CSS3 که جدیدترین نسخه ی CSS است باید از دو عدد (یک جفت) دو نقطه پشت سر هم استفاده کنید. کنسرسیوم جهانی وب این کار را انجام داد تا بتواند بین شبه کلاس ها و شبه عناصر تفاوت واضحی بگذارد. در واقع در نسخه های قبلی CSS (مانند CSS2 و CSS1) هم برای شبه عناصر و هم برای شبه کلاس ها از یک علامت دو نقطه استفاده می شد (:) اما دیگر این چنین نیست.

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

شبه عنصر first-line:: برای استایل دهی به خط اول یک عنصر مورد استفاده قرار می گیرد. کد زیر خط اول تمام عناصر <p> را هدف میگیرد:

مشاهده ی خروجی در JSBin

سوال: خط اول یعنی چه؟

پاسخ: خط اول با اینتر (line break) و … مشخص نمی شود بلکه واقعا از نظر ظاهری هر کلمه ای که در خط اول قرار بگیرد هدف خواهد بود. بنابراین این ویژگی واکنش گرا است چرا که اگر قسمت خروجی را کوچک کنید می بینید که با تغییر اندازه ی خط اول و تعداد کلماتش، باز هم خط اول قرمز می ماند.

نکته: این ویژگی تنها روی عناصر Block کار می کند.

شبه عنصر first-line:: می تواند خصوصیات زیر را بگیرد:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

شبه عنصر first-letter

شبه عنصر first-letter:: برای استایل دهی به حرف اول از یک متن به کار می رود. در مثال زیر می خواهیم اولین حرف از تمام عناصر <p> را استایل دهی کنیم:

مشاهده ی خروجی در JSBin

نکته: شبه عنصر first-letter:: تنها روی عناصر block اثر می گذارد.

خصوصیات زیر را می توان به این شبه عنصر داد:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • (“vertical-align (only if “float” is “none
  • text-transform
  • line-height
  • float
  • clear

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

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

مشاهده ی خروجی در JSBin

شبه عنصر before::

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

در مثال زیر، قبل از محتوای هر <h1> یک تصویر اضافه خواهد شد:

مشاهده ی خروجی در JSBin

شبه عنصر after::

از شبه عنصر after:: برای ایجاد محتوا بعد از محتوای اصلی یک عنصر استفاده می شود. در مثال زیر، بعد از محتوای هر <h1> یک تصویر اضافه خواهد شد:

مشاهده ی خروجی در JSBin

شبه عنصر selection::

شبه عنصر selection:: قسمتی از عنصر است که توسط کاربر select یا انتخاب می شود. این شبه عنصر با خصوصیات color و background و cursor و outline در زبان CSS ترکیب می شود.

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

مشاهده ی خروجی در JSBin

هشدار: این ویژگی در Internet Explorer 8 و نسخه های قبل تر آن کار نمی کند. همچنین مرورگر Firefox دستور خاص خودش را برای انجام این کار دارد و آن دستور moz-selection-:: است.

شبه عناصر دیگر

شبه عناصر دیگر CSS از این قرار اند:

::after (:after) ::backdrop ::before (:before) ::cue (:cue) ::first-letter (:first-letter) ::first-line (:first-line) ::grammar-error ::marker ::placeholder ::selection ::slotted() ::spelling-error

از آنجایی که این شبه عناصر زیاد هستند، توضیح تک تک آن ها مقدور نیست. در صورت تمایل به مطالعه و آشنایی بیشتر با آن ها میتوانید به صفحه ی توسعه دهندگان Mozilla مراجعه کنید. امیدوارم از این قسمت لذت برده باشید.

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

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle