شبه عناصر Pseudo-elements به شما کمک می کنند یک عنصر را ایجاد کنید.
یک عنصر موجود را با افکت ها و جلوه های خاص، زیباتر و خاص تر کنید.
در آموزش امروز قصد داریم کار با شبه عناصر Pseudo-elements در css را با هم مرور کنیم.
شبه عناصر چیستند؟
از شبه عناصر برای استایل دهی و سبک سازیبرای یک بخش خاص از یک عنصر استفاده می شود.
در شبه کلاس ها شما میتوانستید برای کل یک عنصر این کار را انجام دهید.پ
اما شبه عنصر ، امکان عملیات ریزتر روی خود عنصر را برای شما فراهم می کند.
برای مثال کارهای زیر را می توانید انجام دهید:
1- استایل دهی به اولین حرف یک کلمه، یا اولین خط یک متن
2- اضافه کردن کردن محتوای یک عنصر ، قبل یا بعد از آن
شکل نحوی کدنویسی برای شبه عناصر
شکل نحوی و دستوری کدنویسی برای شبه عناصر مانند کدنویسی برای شبه کلاس هاست.
نمونه ای از این دستورات را میتوانید در مثال زیر ببینیند:
[php]
selector::pseudo-element {
property:value;
}
[/php]
به نماد : : توجه کنید
در ss3، علامت” : : “جایگزین علامت” : “شد.
این تغییر به این خاطر بود که میان شبه عناصر و شبه کلاس ها تمایز ایجاد شود.
در css1 و css2 از نماد ” : ” برای هم شبه کلاس ها و هم شبه عناصر استفاده می شد.
برای سازگاری با نسخه های قدیمیتر، علامت ” : ” برای شبه عناصر در css1 و css2 قابل قبول است.
:: شبه عنصر اولین خط
از شبه عنصر اولین خط، برای استایل دهی به اولین خط یک متن استفاده می شود.
مثال زیر، اولین خط از تمام عناصر<p> موجود در صفحه را با مقادیر گفته شده در کد، استایل دهی می کند:
مثال:
[php]
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
[/php]
یک نکته خیلی مهم
شبه عناصر اولین خط فقط برای عناصری که دارای خاصیت block هستند قابل استفاده است.
شما میتوانید ویژگی های زیر را برای شبه عناصر اولین خط مقداردهی کنید:
- font properties تنظیمات فونت
- color properties تنظیمات رنگ
- background properties تنظیمات پس زمینه
- word-spacing تنظیمات فواصل کلمات
- letter-spacing تنظیمات فواصل حروف
- text-decoration تنظیمات تزیین متن
- vertical-align ترازبندی عمودی
- text-transform تبدیل متن
- line-height ارتفاع خظ
- clear پاکسازی
:: شبه عنصر اولین حرف
شبه عنصر اولین حرف، برای استایل دهی و تنظیمات اولین حرف از یک کلمه استفاده می شود.
مثال زیر، اولین حرف از یک متن را در داخل عنصر <p> با مقادیر گفته شده، استایل دهی می کند.
مثال:
[php]
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
[/php]
نتیجه را مشاهده کنید.
یک نکته خیلی مهم
شبه عناصر اولین حرف، فقط برای عناصری که که دارای خاصیت block هستند، قابل استفاده است.
شما میتوانید ویژگی های زیر را برای شبه عناصر اولین اولین حرف مقداردهی کنید:
- font properties تنظیمات فونت
- color properties تنظیمات رنگ
- background properties تنظیمات پس زمینه
- margin properties تنظیمات حاشیه خارجی
- padding properties تنظیمات حاشیه داخلی
- border properties تنظیمات خط
- text-decoration تنظیمات تزیین متن
- (vertical-align (only if “float” is “none ترازبندی عمودی (فقط زمانی که مقدارfloatبرابر با noneباشد)
- text-transform تبدیل متن
- line-height ارتفاع خط
- float شناور
- clear پاکسازی
شبه عناصر و کلاس ها css
شبه عناصر می توانند با کلاس های css ترکیب شوند.
به مثال زیر توجه کنید:
[php]
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}
[/php]
نتیجه را مشاهده کنید.
مثال بالا ، اولین حرف یک پاراگراف را با کلاس “intro” و به رنگ قرمز و با سایز بزرگ نمایش خواهد داد.
شبه عناصر چندگانه
چند شبه عنصر نیز می توانند با یکدیگر ترکیب شوند.
در مثال زیر، اولین حرف از پاراگراف به رنگ قرمز خواهد بود. و در اندازه دلخواه سایز متن را بزرگ نمایش خواهد داد.
بقیه حروف در اولین خط به رنگ خواهد بود.و سایزی کمتر خواهد داشت.
باقی حروف موجود در پاراگراف در رنگ و سایز پیشفرض باقی خواهند ماند.
مثال:
[php]
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
[/php]
نتیجه را ببینید.
:: شبه عنصر ماقبل
شبه عنصر ماقبل ، برای وارد کردن یک محتوا قبل از محتوای یک عنصر استفاده می شود.
کد زیر باعث می شود یک تصویر قبل از محتوای هر عنصر <h1> در عناصر وارد شود.
[php]
h1::before {
content: url(smiley.gif);
}
[/php]
شبه عنصر مابعد
شبه عنصر مابعد برای وارد کردن یک محتوا بعد از محتوای یک عنصر استفاده می شود.
کد زیر باعث می شود یک تصویر بعد از محتوای هر عنصر <h1> در عناصر وارد شود.
[php]
h1::after {
content: url(smiley.gif);
}
[/php]
نتیجه را مشاهده کنید.
شبه عنصر انتخاب
شبه عنصر انتخاب بخشی از عنصر را با قسمت انتخاب شده توسط کاربر تطبیق می دهد.
خصوصیات css که می توان در شبه عنصر انتخاب تنظیم کرد اینها هستند:
- color رنگ
- background پس زمینه
- cursor مکان نما
- outline خط خارجی
مثال زیر متن انتخاب شده را قرمز و پس زمینه آن را زرد رنگ می کند.
[php]
::selection {
color: red;
background: yellow;
}
[/php]