میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

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

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش شبه عناصر ( pseudo-element ) در CSS با من همراه باشید.

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

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

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

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

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

::backdrop

::before (:before)

::cue (:cue)

::first-letter (:first-letter)

::first-line (:first-line)

::grammar-error

::marker

::placeholder

::selection

::slotted()

::spelling-error


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

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

p::first-line { 
color: #ff0000;
 font-variant: small-caps; 
}

برای مشاهده مثال  کلیک کنید

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

پاسخ: خط اول با اینتر (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> را استایل دهی کنیم:

p::first-letter { 
 color: #ff0000;
 font-size: xx-large;
 }

برای مشاهده مثال  کلیک کنید

نکته: شبه عنصر 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 می گیرد. بقیه ی پاراگراف نیز اندازه ی فونت و رنگ پیش فرض خودش را خواهد داشت:

p::first-letter { 
 color: #ff0000;
 font-size: xx-large;
 } 

p::first-line { 
 color: #0000ff;
 font-variant: small-caps; 
}

 


شبه عنصر before::

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

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

h1::before {
 content: url(https://www.w3schools.com/css/smiley.gif);
 }

برای مشاهده مثال کلیک کنید


شبه عنصر after::

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

h1::after {
 content: url(https://www.w3schools.com/css/smiley.gif); 
}

برای مشاهده مثال کلیک کنید


شبه عنصر selection::

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

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

::-moz-selection { 
/* Code for Firefox */
 color: red; background: yellow;
 } 
::selection { 
color: red; 
background: yellow; 
}

برای مشاهده مثال کلیک کنید

هشدار: این ویژگی در 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

سلکتورتوضیح
after::با یک عنصر استایل‌پذیر که پس از محتوای واقعی عنصر مبدأ می‌آید، تطبیق می‌یابد.
before::با یک عنصر استایل‌پذیر که پیش از محتوای واقعی عنصر مبدأ می‌آید، تطبیق می‌آید.
first-letter::با حرف نخست عنصر تطبیق می‌یابد.
first-line::با خط نخست عنصر مشمول تطبیق می‌یابد.
grammar-error::با بخشی از سند که شامل خطای گرامری است و از سوی مرورگر علامت‌گذاری شده، تطبیق می‌یابد.
selection::با بخشی از سند که انتخاب شده است، تطبیق می‌یابد.
spelling-error::با بخشی از سند که شامل یک خطای املایی است و از سوی مرورگر علامت‌گذاری شده است، تطبیق می‌یابد.
backdrop::عنصر شبه :: backdrop جعبه ای است که عنصر تمام صفحه پشت آن قرار دارد ، اما در عین حال بالاتر از همه مطالب قرار دارد
cue::یک عنصر انتخاب شده با نشانه‌های WebVTT را تطابق می‌دهد. این شبه عنصر می‌تواند برای استایل زیرنویس و دیگر موارد محتوای تصویری با VTT tracks مورد استفاده قرار گیرد.
marker::برای استایل دهی نقطه ها در ul و یا شماره ها در ol بیشتر کاربرد دارد
placeholder::برای استایل دهی متن placeholder در input مورد استفاده قرار می گیرد
slotted::هر عنصری را که درون تگی قرار داده شده انتخاب می کند

 

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

 

 

 


امیدواریم آموزش شبه عناصر ( pseudo-element ) در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
csspseudo element در CSSw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسشبه عناصر ( pseudo-element ) در CSSشبه عناصر در cssفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟