آموزش CSS

آموزش CSS - المان های pseudo-class

pseudo-elements در CSS راهی برای استایل دادن به المان هایی از سند (document ) است که به صراحت توسط position  (موقعیت) در document tree تعریف نشده اند.

 

Pseudo-element چیست

pseudo-elements در css به شما اجازه استایل دادن به المان ها یا بخش هایی از المان بدون افزودن class یا ID را می دهد. این امر در شرایطی که شما تنها می خواهید به اولین حرف از یک پاراگراف  برای ایجاد اثر drop cap استایل دهید و یا زمانی که می خواهید برای برخی از مطالب قبلی یا بعدی یک المان را وارد کنید و ... تنها از طریق style sheet استفاده می شود.

CSS3 دستور نگارش جدید :: را برای تشخیص میان pseudo-elements و pseudo-classes معرفی نموده که دستور نگارش آن به شرح زیر است.

selector::pseudo-element { property: value; }

در زیر استفاده های معمول از pseudo-element قرار دارد.

 

::first-line در pseudo-element

::first-line در pseudo-element استایل خاصی را به اولین خط از متن اعمال می نمایند.

در مثال زیر قانون استایل خط اول متن را در یک پاراگراف فرمت می کند. طول اولین خط به اندازه آن در پنجره مرورگر یا المان حاوی آن بستگی دارد.

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

نکته: خاصیت های (properties) CSS که می توانند بر ::first-line اعمال شوند به شرح زیر است: font properties، background properties، color word-spacing، letter-spacing، text-decoration، vertical-align، text-transform، line-height.

 

first-letter:: در pseudo-element

first-letter:: در pseudo-element برای افزودن استایل به اولین حرف از اولین متن استفاده می شود. در مثال زیر قوانین استایل اولین حرف پاراگراف را فرمت کرده و اثر drop cap را ایجاد می کنند.

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

نکته: خاصیت های (properties) CSS که می توانند بر first-letter:: اعمال شوند به شرح زیر است: font properties، text-decoration، text-transform، letter-spacing، word-spacing، line-height، float، vertical-align (تنها در زمانی که 'float' برابر با 'none' می باشد) ، color، margin  و padding properties، border properties، background properties.

 

before:: و after:: در pseudo-element

before:: و after:: در pseudo-element می تواند برای وارد نمودن مطالب تولید شده قبلی یا بعدی از element's content (محتوای المان) استفاده شود. خاصیت content در CSS به عنوان رابط  pseudo-element برای وارد کردن مطالب تولید شده استفاده می شود.

این امر برای آراستن المان با محتوای غنی که نباید بخشی از نشانه گذاری واقعی صفحه باشد، مفید است. با استفاده از این pseudo-element قادر به وارد نمودن رشته های منظم به متن و یا جاسازی شئ مانند  تصویر و منابع دیگر می باشید.

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" را به رنگ سبز نمایش می دهند.

p.article::first-letter {
    color: #00ff00;
    font-size: xx-large;
}
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش CSS

Learn CSS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...