عناصر شبه در CSS (Pseudo-elements)
«عنصر شبه (Pseudo-element)» کلیدواژه ای است که به انتخاب گر افزوده می شود تا بخشی خاص از یک عنصر را سبک دهی کند. بنابراین بدون تغییر HTML می توان بخش هایی مانند اولین خط، اولین حرف یا محتوای قبل/بعد را هدف گرفت.
نحوه نگارش عناصر شبه
عناصر شبه با دونقطه دوتایی (::) نوشته می شوند و پس از نام انتخاب گر می آیند:
selector::pseudo-element-name { /* CSS properties */ }نکته: از عناصر شبه برای کارهایی مانند استایل دادن به اولین خط/حرف، درج محتوا قبل/بعد، تغییر نشان گرهای فهرست و انتخاب کاربر استفاده می شود.
::first-line — اولین خط
برای افزودن استایل ویژه به نخستین خط متن عنصر بلوکی استفاده می شود:
p::first-line { color: red; font-variant: small-caps; font-size: 19px; }::first-letter — اولین حرف
برای بزرگ نمایی یا تزیین نخستین حرف متن در عناصر بلوکی کاربرد دارد:
p::first-letter { color: red; font-size: xx-large; }::before و ::after — درج محتوا
با ویژگی content می توانید قبل یا بعد از محتوای عنصر، متن یا تصویر درج کنید:
h3::before { content: url(smiley.gif); }
h3::after { content: url(smiley.gif); }::marker — نشان گرهای فهرست
برای استایل دهی گلوله ها یا شماره های آیتم های فهرست به کار می رود:
::marker { color: red; font-size: 23px; }::selection — متن انتخاب شده
بخش انتخاب شده توسط کاربر را استایل می دهد:
::selection { color: red; background: yellow; }::backdrop — پس زمینه دیالوگ
نمای پشت یک dialog یا پاپ اور را هدف می گیرد:
dialog::backdrop { background-color: lightgreen; }ترکیب با کلاس ها و چند عنصر شبه
عناصر شبه را می توان با کلاس های HTML ترکیب کرد یا چند مورد را هم زمان به کار برد:
p.intro::first-letter { color: #ff0000; font-size: 200%; }
p::first-letter { color: red; font-size: xx-large; }
p::first-line { color: blue; font-variant: small-caps; }هشدار: ::first-line و ::first-letter فقط روی عناصر بلوکی اعمال می شوند.
مطالعه بیشتر درباره عناصر شبه
برای تکمیل مباحث، به کلاس های شبه و ترکیب گرها سر بزنید. همچنین از این بخش با عنوان عناصر شبه یاد می شود و نمونه های بالا را پوشش می دهد.