Pseudo-Elements در CSS
یادگیری CSS
تعداد بازدید :
4474
تاریخ و ساعت انتشار :
چهار شنبه 1 شهریور 1396 01:55
شبه عنصر چیست؟
- یک شبه عنصر CSS برای استایل دهی به قسمت خاصی از یک عنصر ، استفاده می شود.
برای مثال می توان از شبه عنصر برای موارد زیر استفاده کرد :
استایل دهی به اولین حرف یا کلمه از یک عنصر - وارد کردن محتوا قبل یا بعد از محتوای عنصر مورد نظر
ترکیب کد شبه عنصر ها
ترکیب کد برای Pseudo-Elements در CSS به شرح زیر می باشد :
ترکیب کد شبه عناصر
مشاهده مثالselector::pseudo-element { property:value; }
نکته ! به علامت :: در ابتدای شبه عناصر توجه کنید. این علامت در CSS3 برای جداسازی شبه کلاس ها با شبه عنصر می باشد. قبلا در CSS1 و CSS2 هر دو مورد با : مشخص می شدند.
شبه عنصر first-line::
این شبه عنصر برای تعریف استایلی خاص برای خط اول یک متن ، استفاده می شود.
در مثال زیر ، خط اول متن در تمام عناصر <p> فرمت دهی می شود.
مثال :
شبه عنصر first-line
مشاهده مثالp::first-line { color: #ff0000; font-variant: small-caps; }
نکته : شبه عنصر first-line:: فقط برای عناصر سطح بلوک قابل استفاده است.
صفات زیر را می توان به first-line:: اضافه کرد :
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
شبه عنصر first-letter::
این شبه عنصر برای تعریف استایلی خاص برای حرف اول یک متن ، استفاده می شود.
در مثال زیر ، حرف اول متن در تمام عناصر <p> فرمت دهی می شود.
مثال :
شبه عنصر first-letter
مشاهده مثالp::first-letter { color: #ff0000; font-size: xx-large; }
نکته : شبه عنصر first-letter:: فقط برای عناصر سطح بلوک قابل استفاده است.
صفات زیر را می توان به first-letter:: اضافه کرد :
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (فقط زمانی که float بر روی none تنظیم شده باشد )
text-transform
line-height
float
clear
Pseudo-elements و کلاس های CSS
Pseudo-elements را می توان با کلاس های CSS ترکیب کرد.
مثال :
شبه عنصر و کلاسهای CSS
مشاهده مثالp.intro::first-letter { color: #ff0000; font-size:200%; }
در مثال بالا ، حرف اول پاراگراف هایی که دارای class="intro" هستند ، به رنگ قرمز و با اندازه بزرگتر نمایش داده خواهد شد.
Pseudo-element های چندگانه
چندین Pseudo-elements می توانند با هم ترکیب شوند. در مثال زیر اولین حرف از پاراگراف به رنگ قرمز در اندازه xx-large نمایش داده می شود. باقی خط اول متن ، آبی رنگ خواهد بود و با حروف بزرگ به اندازه کوچک ، و باقی مانده متن پاراگراف ، به اندازه و رنگ پیش فرض نمایش داده خواهد شد.
مثال :
چند شبه عنصر با هم
مشاهده مثالp::first-letter { color: #ff0000; font-size: xx-large; } p::first-line { color: #0000ff; font-variant: small-caps; }
شبه عنصر before::
این شبه عنصر برای افزودن محتوایی قبل از محتوای عنصر مورد نظر ، استفاده می شود.
در مثال زیر ، قبل از محتوای هر <h1> یک تصویر نمایش داده می شود.
مثال :
شبه عنصر before
مشاهده مثالh1::before { content: url(smiley.gif); }
شبه عنصر after::
این شبه عنصر برای افزودن محتوایی بعد از محتوای عنصر مورد نظر ، استفاده می شود.
در مثال زیر ، بعد از محتوای هر <h1> یک تصویر نمایش داده می شود.
مثال :
شبه عنصر after
مشاهده مثالh1::after { content: url(smiley.gif); }
شبه عنصر selection::
از این شبه عنصر برای انتخاب بخشی از عنصر که توسط کاربر انتخاب شده است ، استفاده می شود. مقادیر زیر را می توان به این شبه عنصر اضافه کرد :
color ، background ، cursor و outline.
در مثال زیر متن انتخاب شده به رنگ قرمز و بر روی رنگ زمینه زرد نمایش داده می شود.
مثال :
شبه عنصر selection
مشاهده مثال::selection { color: red; background: yellow; }
تمام شبه عناصر در CSS
سلکتور مثال توضیحات مثال ::after p::after Insert something after the content of each <p> element ::before p::before Insert something before the content of each <p> element ::first-letter p::first-letter Selects the first letter of each <p> element ::first-line p::first-line Selects the first line of each <p> element ::selection p::selection Selects the portion of an element that is selected by a user
تمام شبه کلاس ها در CSS
سلکتور مثال توضیحات مثال :active a:active Selects the active link :checked input:checked Selects every checked <input> element :disabled input:disabled Selects every disabled <input> element :empty p:empty Selects every <p> element that has no children :enabled input:enabled Selects every enabled <input> element :first-child p:first-child Selects every <p> elements that is the first child of its parent :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent :focus input:focus Selects the <input> element that has focus :hover a:hover Selects links on mouse over :in-range input:in-range Selects <input> elements with a value within a specified range :invalid input:invalid Selects all <input> elements with an invalid value :lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it" :last-child p:last-child Selects every <p> elements that is the last child of its parent :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent :link a:link Selects all unvisited links :not(selector) :not(p) Selects every element that is not a <p> element :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent :only-child p:only-child Selects every <p> element that is the only child of its parent :optional input:optional Selects <input> elements with no "required" attribute :out-of-range input:out-of-range Selects <input> elements with a value outside a specified range :read-only input:read-only Selects <input> elements with a "readonly" attribute specified :read-write input:read-write Selects <input> elements with no "readonly" attribute :required input:required Selects <input> elements with a "required" attribute specified :root root Selects the document's root element :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) :valid input:valid Selects all <input> elements with a valid value :visited a:visited Selects all visited links
نظرات