شبه المان در CSS
شبه المان (pseudo-element) در CSS، برای استایل دهی به بخش خاصی از المان به کار می رود.
شبه المان با 2 علامت دونقطه - کالُن (::) به انتهای انتخابگر اضافه می شود.
selector::pseudo-element {
property: value;
}برای مثال، می توان از آن برای:
- استایل دهی اولین حرف یا خط المان
- وارد کردن محتوا، قبل و یا بعد از محتوای خود المان
استفاده کرد.
شبه المان ::first-line در CSS
شبه المان ::first-line، امکان استایل دهی اولین خط المان را می دهد.
p::first-line {
color: white;
background: red;
}نکته: شبه کلاس first-line::، فقط برای المان های block-level استفاده می شود.
شبه المان first-line، فقط ویژگی های زیر می تواند اعمال کند.
مقادیر |
توضیحات |
| font properties |
مقادیر مربوط به فونت |
|
color properties |
مقادیر مربوط به رنگ متن |
| background properties |
مقادیر مربوط به پس زمینه |
| margin properties | مقادیر مربوط به لبه خارجی (margin) |
| padding properties | مقادیر مربوط به لایه داخلی (padding) |
| border properties | مقادیر مربوط به حاشیه (border) |
| text-decoration | ظاهرسازی متن |
| vertical-align | چینش عمودی متن (تنها اگر ویژگی "float" بر روی "none" باشد) |
| text-transform | بزرگی و کوچکی حروف لاتین |
| line-height | ارتفاع خط |
| float | ویژگی float |
| clear | پاک شدن اثر شناور بودن المان قبلی |
شبه المان ::first-letter در CSS
شبه کلاس first-letter:: امکان استایل دهی اولین حرف المان را به ما می دهد.
p::first-letter {
color: white;
background: red;
font-size: 35px;
}نکته: شبه المان first-letter::، فقط برای المان های block-level استفاده می شود.
شبه المان first-letter، فقط ویژگی های زیر می تواند اعمال کند.
مقادیر |
توضیحات |
| font properties |
مقادیر مربوط به فونت |
|
color properties |
مقادیر مربوط به رنگ متن |
| background properties |
مقادیر مربوط به پس زمینه |
| margin properties | مقادیر مربوط به لبه خارجی (margin) |
| padding properties | مقادیر مربوط به لایه داخلی (padding) |
| border properties | مقادیر مربوط به حاشیه (border) |
| text-decoration | ظاهرسازی متن |
| vertical-align | چینش عمودی متن (تنها اگر ویژگی "float" بر روی "none" باشد) |
| text-transform | بزرگی و کوچکی حروف لاتین |
| line-height | ارتفاع خط |
| float | ویژگی float |
| clear | پاک شدن اثر شناور بودن المان قبلی |
ترکیب شبه المان ها در CSS
چندین ویژگی شبه المان می توانند با یکدیگر ترکیب شوند:
p::first-line {
color: white;
background: blue;
font-size: 35px;
}
p::first-letter {
color: red;
}شبه المان ::before در CSS
شبه المان ::before، برای اضافه کردن محتوایی به قبل از محتوا المان به کار می رود.
p::before {
content: url(/tick-icon.png);
}نکته: فونت آیکون ها به کمک شبه المان before یا after ساخته می شوند.
شبه المان ::after در CSS
شبه المان ::after، برای اضافه کردن محتوایی به بعد از محتوا المان به کار می رود.
p::after {
content: url(/tick-icon.png);
}نکته: فونت آیکون ها به کمک شبه المان before یا after ساخته می شوند.
شبه المان ::marker در CSS
شبه المان ::marker، علامت یا شماره پشت محتوای لیست را استایل دهی می کند.
::marker {
color: red;
font-size: 30px;
}نکته: برای اطلاعات بیشتر، به آموزش لیست در CSS مراجعه کنید.
شبه المان ::selection در CSS
شبه المان ::selection، حالت انتخاب شده متن (select) را استایل دهی می کند.
این ویژگی، مقادیر زیر را می پذیرد:
- رنگ (color)
- پس زمینه (background)
- شکل ماوس (cursor)
- خط خارجی (outline)
::selection {
color: red;
background: yellow;
}همه شبه المان های CSS در یک نگاه
انتخابگر ها |
مثال |
توضیحات مثال |
|
after:: |
p::after |
درج محتوا بعد از هر المان <p> |
|
before:: |
p::before |
درج محتوا قبل از هر المان <p> |
| first-letter:: | p::first-letter |
حرف اول هر المان <p> را انتخاب می کند. |
| first-line:: | p::first-line |
خط اول هر المان <p> را انتخاب می کند. |
| marker:: | marker:: | نشانگرهای آیتم های لیست را انتخاب می کند. |
| selection:: | p::selection | بخشی از المانی که توسط کاربر انتخاب می شود را انتخاب می کند. |
خلاصه درس
در این درس با شبه المان (pseudo element) در CSS:
- ویژگی ::first-line
- ویژگی ::first-letter
- ویژگی ::before
- ویژگی ::after
- ویژگی ::marker
- ویژگی ::selection
آشنا شدیم.
احسان اسلامی
