شبه عنصر چیست؟

• یک شبه عنصر 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