CSS Pseudo-elements Reference
🎨 مرجع شبهعناصر در CSS
شبهعناصر (Pseudo-elements) به شما اجازه میدهند بخشهای خاصی از محتوای یک المنت را استایل دهید یا محتوایی تولید کنید که در HTML وجود ندارد.
🔹 شبهعناصر مربوط به محتوا
| شبهعنصر | توضیح | مثال |
|---|---|---|
::before |
محتوایی را قبل از محتوای اصلی المنت قرار میدهد. | p::before { content: "👉 "; } |
::after |
محتوایی را بعد از محتوای اصلی المنت قرار میدهد. | p::after { content: " ✅"; } |
::first-line |
اولین خط متن در یک بلوک را استایل میدهد. | p::first-line { font-weight: bold; } |
::first-letter |
اولین حرف متن در یک بلوک را استایل میدهد. | p::first-letter { font-size: 2em; } |
::selection |
بخشی از متن که توسط کاربر انتخاب (highlight) شده را استایل میدهد. | ::selection { background: yellow; } |
::placeholder |
متن جاینگهدار (placeholder) در ورودیهای فرم را استایل میدهد. | input::placeholder { color: gray; } |
::marker |
علامت بولت یا شماره در فهرستها را استایل میدهد. | li::marker { color: red; } |
::backdrop |
پسزمینه پشت یک عنصر تمامصفحه (full-screen) را استایل میدهد. | ::backdrop { background-color: rgba(0,0,0,0.5); } |
::cue |
زیرنویسها یا کپشنهای ویدیو (text track cues) را استایل میدهد. | ::cue { color: white; background: black; } |
::cue-region |
ناحیهای که زیرنویسها در آن نمایش داده میشوند را استایل میدهد. | ::cue-region { font-size: 1.2em; } |
::file-selector-button |
دکمهی انتخاب فایل (Choose File) در ورودیهای فایل را استایل میدهد. | input[type=file]::file-selector-button { background: blue; } |
::part(name) |
عناصر داخل Shadow DOM که با ویژگی part="name" در دسترساند را استایل میدهد. |
my-component::part(button) { color: red; } |
::slotted(selector) |
عناصری را که از بیرون به slot یک وبکامپوننت فرستاده شدهاند، استایل میدهد. | slot::slotted(span) { color: green; } |
🔹 شبهعناصر مخصوص کنترلهای فرم و رابط کاربری (UI)
| شبهعنصر | توضیح | مثال |
|---|---|---|
::input-placeholder |
نسخهی قدیمیتر از ::placeholder. |
— |
::value (آزمایشی) |
مقدار داخل ورودیها را استایل میدهد. | — |
::progress-bar |
نوار پیشرفت در المنت <progress> را استایل میدهد. |
progress::progress-bar { background: green; } |
::progress-value |
بخش مقداردهیشدهی نوار پیشرفت را استایل میدهد. | progress::progress-value { color: white; } |
::meter-bar |
نوار اصلی المنت <meter> را استایل میدهد. |
meter::meter-bar { background: lightgray; } |
::meter-optimum, ::meter-suboptimum, ::meter-even-less-good |
بخشهای مختلف <meter> را بر اساس مقدار تنظیم میکنند. |
— |
::resizer |
دستهی تغییر اندازه (resize handle) یک المنت را استایل میدهد (در برخی مرورگرها). | — |
🔹 شبهعناصر مربوط به چاپ و صفحات (Page/Print)
| شبهعنصر | توضیح | مثال |
|---|---|---|
::page |
کل صفحه چاپ را استایل میدهد. | @page { margin: 1in; } |
::left, ::right, ::first |
برای هدفگیری صفحات خاص هنگام چاپ استفاده میشوند. | @page :first { margin-top: 0; } |
::footnote-call |
شماره ارجاع پاورقیها را استایل میدهد. | — |
::footnote-marker |
نشانهی پاورقی در متن را استایل میدهد. | — |
💡 نکات مهم
- همیشه از دو نقطه (::) برای شبهعناصر استفاده کنید.
(مثلاً::beforeبه جای:before)
با این حال، مرورگرها هنوز نسخهی قدیمی با یک نقطه را هم پشتیبانی میکنند. - میتوانید شبهعناصر را با شبهکلاسها ترکیب کنید.
p:hover::after {
content: ” (hovered)”;
color: blue;
}
دیدگاهتان را بنویسید