استفاده از Pseudo Element ها

سودو المنت ها در سی اس اس همواره مهم بوده اند.در این مطلب به نحوه استفاده از آنها می پردازم.

برای استفاده عناصر سودو سی اس اس ٬ شما باید ساختار خاصی از کدنویسی را رعایت کنید که ساختار آن را در تکه کد پایین مشاهده می کنید :

selector::pseudo-element{
    property:value;
}

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

مثالی را از نحوه استفاده از عناصر سودو در سی اس اس را می توانید در زیر مشاهده نمایید :

h1::first-letter{
    font-size:48px;
    font-weight:bold;
}

در تکه کد بالا ٬ ما سودو المنت First-Letter مربوط به H1 های درون صفحه خود را صدا زدیم و به خصوصیات آن مقدار هایی را نسبت دادیم.نحوه استفاده از دیگر سودو المنت ها نیز همینگونه است.

First Letter

از این عنصر سودو در CSS برای تغییر خصوصیات حرف اول یک عبارت استفاده می شود.شما می توانید بصورت زیر خصوصیات خاصی را به حرف اول عبارت خود نسبت دهید :

p::first-letter{
    font-size:48px;
    font-weight:bold;
}

در نظر داشته باشید که تنها خصوصیات زیر را با استفاده از ::First-letter می توانید تغییر دهید :

• خصوصیات فونت
• خصوصیات رنگ
• خصوصیات پس زمینه
• خصوصیات Margin
• خصوصیات Padding
• خصوصیات Border
• Text-Decoration
• Text-Transform
• Line-Height
• Float
• Clear

First Line

از این عنصر سودو در سی اس اس برای تغییر خصوصیات خط اول یک متن استفاده می شود.سینتکس آن را با مثال در پایین مشاهده می کنید :

p::first-line{
  color:#000;
}

خصوصیاتی که می توانید با استفاده از ::First-Line تغییر دهید :

• خصوصیات فونت
• خصوصیات رنگ
• خصوصیات پس زمینه
• Word-Spacing
• Letter-Spacing
• Text-Decoration
• Vertical-Align
• Text-Transform
• Line-Height
• Clear

Before

::Before و ::After جزو پر کاربردترین سودو المنت های سی اس اس به شمار می روند.پایین تر در مورد ::After نیز توضیح می دهیم.سودو المنت ::Before قبل از تمام فرزند های یک عنصر ٬ عنصری تازه ایجاد می کند که می توانید به آن خصوصیات مورد نظر خود را نسبت دهید.مثال آن را در پایین مشاهده می کنید :

div::before{
  content:'';
  display:block;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#000;
}

After

در بالا در مورد ::Before صحبت کردیم و فهمیدیم که چگونه کار می کند.سودو المنت ::After بر عکس ::Before ٬ بعد از تمام فرزند های یک عنصر ٬ عنصری جدید به آن اضافه می کند.سینتکس آن نیز مانند ::Before می باشد.

div::after{
  content:'';
  display:block;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#000;
}

Selection

این عنصر سودو در سی اس اس ٬ مشخص می کند هنگامی که قسمتی از یک عنصر انتخاب شد ٬ چه رفتاری داشته خصوصیاتی داشته باشد.به عنوان مثال p::selection مشخص می کند هنگامی که کاربر متن های موجود در تگ p را انتخاب ( سلکت ) کرد ٬ چه خصوصیاتی داشته باشد.مثال آن را در پایین مشاهده می کنید :

p::selection{
  color:#444;
  background:#fff;
}

خصوصیاتی که به هنگام استفاده از سودو المنت ::Selection می توانید تغییر دهید را در پایین مشاهده می کنید :

• Color
• Background
• Cursor
• Outline

در صورتی که این مطلب برایتان مفید بوده ٬ خوشحال می شوم به نسخه اصلی سودو المنت ها در سی اس اس در وبسایت ما نیز سر بزنید.