pseudo-element در CSS راهی برای استایل دادن به المان هایی از سند است که به صراحت توسط position (موقعیت) تعریف نشده اند.
pseudo-element در css چیست
pseudo-element در css به شما اجازه استایل دادن به المان ها یا بخش هایی از المان بدون افزودن class یا ID را می دهد.
این امر در شرایطی که شما تنها می خواهید به اولین حرف از یک پاراگراف برای ایجاد اثر drop cap استایل دهید و یا زمانی که می خواهید برای برخی از مطالب قبلی یا بعدی یک المان را وارد کنید و … تنها از طریق css قابل انجام است.
CSS3 دستور نگارش جدید :: را برای تشخیص میان pseudo-element و pseudo-classe معرفی نموده که دستور نگارش آن به شرح زیر است.
|
1 |
selector::pseudo-element { property: value; } |
در بخش زیر موارد پراستفاده از pseudo-element در css لیست شده اند.
::first-line
::first-line استایل خاصی را به اولین خط از متن اعمال می نمایند.
در مثال زیر استایل مورد نظر, خط اول متن را در یک پاراگراف را فرمت دهی می کند. طول اولین خط به اندازه آن در پنجره مرورگر یا المان حاوی آن بستگی دارد.
|
1 2 3 4 |
p::first-line { color: #ff0000; font-variant: small-caps; } |
نکته: خاصیت های CSS که می توانند بر ::first-line اعمال شوند به شرح زیر است:
font، background، color, word-spacing، letter-spacing، text-decoration، vertical-align، text-transform، line-height.
first-letter::
first-letter:: برای افزودن استایل به اولین حرف از اولین متن استفاده می شود. در مثال زیر قوانین استایل اولین حرف پاراگراف را فرمت کرده و اثر drop cap را ایجاد می کنند.
|
1 2 3 4 |
p::first-letter { color: #ff0000; font-size: xx-large; } |
نکته: خاصیت های (properties) CSS که می توانند بر first-letter:: اعمال شوند به شرح زیر است:
font، text-decoration، text-transform، letter-spacing، word-spacing، line-height، float، vertical-align (تنها در زمانی که ‘float‘ برابر با ‘none’ می باشد) ، color، margin و padding، border، background.
شبه عنصر before:: و after::
before:: و after:: می تواند برای وارد نمودن محتوای تولید شده قبل یا بعد از محتوای المان استفاده شود. خاصیت content در CSS به عنوان رابط سودو المان برای وارد کردن محتوای تولید شده استفاده می شود.
این امر برای آراستن المان با محتوای غنی که نباید بخشی از تگ های HTML صفحه باشد، مفید است. با استفاده از این pseudo-element قادر به وارد نمودن رشته های منظم به متن و یا جاسازی شئ مانند تصویر و منابع دیگر هستید.
|
1 2 3 4 5 6 |
h1::before { content: url("images/marker-left.gif"); } h1::after { content: url("images/marker-right.gif"); } |
Pseudo-elementها و کلاس های CSS
به طور کلی با استفاده از pseudo-element تنها برای استایل دادن به پاراگراف خاصی از متن یا دیگر سطح های بلوک استفاده می شود.
در اینجا است که کلاس را برای pseudo-element اعلام می نماییم. pseudo-elementها می توانند با کلاس های CSS جهت تولید اثر به خصوص برای المان های دارای این کلاس ترکیب شوند.
در مثال زیر قوانین استایل حرف های اول تمامی پاراگراف های دارای class="article" را به رنگ سبز نمایش می دهند.
|
1 2 3 4 |
p.article::first-letter { color: #00ff00; font-size: xx-large; } |
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
با سلام ممنون از آموزش فوق العاده و دقت عالیتان .
بنده هم سعی در تدریس این مطالب به دیگر افراد را دارم و امیدوارم بنده هم به همین شکل مفید ، به دیگر افراد آموزش دهم .
باتشکر
سلام. ممنون از شما
موفق و پیروز باشید