سلام امیدوارم که حالتون خوب باشه و تا به الان روز خوبی راسپری کرده باشید.آیا درمورد کاربرد شبه عناصر در CSS اگاهی دارید اگر خیر با ماهمراه باشید.
می توان با استفاده از شبه عناصر درCSSبخش های مختلف یک المان را سبک دهی کرد (styleدلخواه را به آن اعمال کرد) .
از شبه عنصر های برای انجام کارهایی همچون :
سبک دهی یا اعمال سبک به اولین خط یا حرف یک المان
محتوا مورد نظر را پیش یا پس از محتوای یک عنصر درج کرد
ترکیب نحوی (syntax)
ترکیب نحوی شبه عناصر به ترتیب زیر می باشد :
selector::pseudo-element {
property:value;
}
به دوتا دو نقطه که در مثال فوق بکار برده شده دقت کنید – ::first-line در مقابل :first-line
سیستم حاشیه نویسی (notation) دو تا کاراکتر :: جایگزین یک دو نقطه در CSS گردید . این در واقع تلاشی بود از سوی کنسرسیوم وب جهان W3C که به منظور ایجاد وجه تمایز بینpseudo-classes (شبه کلاس ها) و pseudo-elements (شبه عناصر) صورت گرفت .
ترکیب نحوی تک دو نقطه ی در ویرایش های قدیمی تر CSS2 و CSS1 برای شبه کلاس ها و شبه عناصر بکار می رفت .
برای ایجاد سازگاری با ورژن های قبلی (سازگاری عقبرو backward compatability)، دستور نحوی تک دونقطه ی را می توان برای CSS2 و CSS1 بکار برد .
شبه المان ::first-line
شبه المان ::first-line غالباً به منظور افزودن یا اعمال سبک (Style) خاص به اولین خط یک متن بکار می رود .
شبه المان ::first-line را تنها می توان به المان های block اعمال کرد .
مثال :
خط اول نوشته یا متن را در کلیه ی المان های <p> قالب دهی (فرمت) کنید :
نمونه یک
?
۱
۲
۳
۴
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
خصوصیت های زیر به شبه المان ::first-line اعمال می شوند :
font properties (خصوصیت های فوت یا قلم نوشته)
color properties (خصویت های رنگ)
background properties (خصوصیت های مربوط به پس زمینه)
word-spacing (کنترل فاصله بین کلمات)
letter-spacing (کنترل فاصله ی بین حروف)
text-decoration (اعمال جلوه های بصری و تزئین نوشته)
vertical-align (ترازبندی در جهت عمودی)
text-transform (کنترل کوچک و بزرگی حروف)
line-height (تنظیم فاصله ی بین خطوط)
clear (آزاد کردن فضای پیرامون عنصر)
شبه المان ::first-letter
شبه المان ::first-letter به منظور اعمال سبک یا style خاصی به اولین خط یک نوشته بکار می رود .
شبه المان ::first-letter را تنها می توان به المان های block اعمال کرد .
مثال :
تمامی حروف اول نوشته را در المان های <p> قالب دهی کنید :
نمونه دو
?
۱
۲
۳
۴
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
تمامی خوصیت های ذیل به شبه المان ::first-letter اعمال می شوند :
font properties
color properties
background properties
margin properties (میزان حاشیه ی دور عناصر را تنظیم می کند)
padding properties (خصوصیت هایی که حاشیه ی درونی عنصر را تنظیم می کند)
border properties(خصوصیت مربوط به تنظیم خطوط حاشیه)
text-decoration
vertical-align ( داشته باشد”none”مقدار “float” فقط در صورتی که )
text-transform
line-height
float (شناور سازی عنصر به چپ یا راست)
clear
شبه کلاس ها و کلاس های CSS
می توان شبه المان ها را با کلاس های CSS ترکیب کرد :
مثال :
نمونه سه
?
۱
۲
۳
۴
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
مثال فوق اولین حروف پاراگراف ها را با class=”intro”، به رنگ قرمز و با اندازه ی بزرگتر نمایش می دهد .
ترکیب چندین شبه عنصر (Multiple pseudo-element)
این امکان وجود دارد که چندین شبه عنصر متعدد را با هم ترکیب کرد .
در مثال زیر همان طور که خود مشاهده می کنید اولین حرف یک پاراگراف قرمز و اندازه ی قلم نوشته یا فونت xx-largeخواهد بود . باقی حروف اولین خط آبی، و اندازه ی فونت آن small-caps می باشد . بقیه ی پاراگراف نیز با رنگ و اندازه ی پیش فرض تنظیم می شود :
مثال :
نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
CSS – شبه المان ::before
با استفاده از این شبه عنصر می توان پیش از محتوای یک المان، کانتنت دیگری درج کرد و قرار داد .
مثال زیر پیش از هر المان <h1> یک تصویر را درج می کند :
مثال :
نمونه پنج
?
۱
۲
۳
h1::before {
content: url(smiley.gif);
}
CSS – شبه عنصر ::after
با بهره گیری از این شبه عنصر می توان محتوای جدیدی پس از کانتنت یک المان ایجاد کرد .
مثال زیر یک تصویر پس از هر المان <h1> درج می کند :
مثال :
نمونه شش
?
۱
۲
۳
h1::after {
content: url(smiley.gif);
}
شبه عنصر ::selection و کاربرد آن در CSS
شبه المان ::selection با آن بخشی از یک عنصر مطابقت دارد که توسط کاربر انتخاب شده باشد (این شبه عنصر در واقع به آن بخشی از سند که توسط کاربر با مکان نمای موس رنگی و انتخاب شده قوانین اعمال می کند) .
خصوصیت های CSS که در زیر آورده شده را می توان به ::selection اعمال کرد :
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>را انتخاب می نماید
::selection
p::selection
آن بخشی از المان را انتخاب می کند که توسط کاربر گزینش شده باشد
