mozilla

Revision 347081 of Pseudo-classes

  • Revision slug: CSS/Pseudo-classes
  • Revision title: Pseudo-classes
  • Revision id: 347081
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment Removing ::selection as it's not a pseudo-class but a pseudo-element

Revision Content

{{ CSSRef() }}

Summary

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example {{ Cssxref(":hover") }} will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ({{ cssxref(":visited") }}, for example), the status of its content (like {{ cssxref(":checked") }} on some form elements), or the position of the mouse (like {{ cssxref(":hover") }} which lets you know if the mouse is over an element or not).

Syntax

selector:pseudo-class {
  property: value;
} 

Examples

  • {{ Cssxref(":link") }}
  • {{ Cssxref(":visited") }}
  • {{ Cssxref(":active") }}
  • {{ Cssxref(":hover") }}
  • {{ Cssxref(":focus") }}
  • {{ Cssxref(":first-child") }}

The following list is of some CSS3 level pseudo-class examples and may not have full browser support. Use fallback methods or JavaScript when necessary. To see a complete list of selectors, visit CSS3 Selectors working spec

  • {{ Cssxref(":nth-child") }}
  • {{ Cssxref(":nth-last-child") }}
  • {{ Cssxref(":nth-of-type") }}
  • {{ Cssxref(":first-of-type") }}
  • {{ Cssxref(":last-of-type") }}
  • {{ Cssxref(":empty") }}
  • {{ Cssxref(":target") }}
  • {{ Cssxref(":checked") }}
  • {{ Cssxref(":enabled") }}
  • {{ Cssxref(":disabled") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>A CSS <em><dfn>pseudo-class</dfn></em> is a keyword added to selectors that specifies a special state of the element to be selected. For example {{ Cssxref(":hover") }} will apply a style when the user hovers over the element specified by the selector.</p>
<p>Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator ({{ cssxref(":visited") }}, for example), the status of its content (like {{ cssxref(":checked") }} on some form elements), or the position of the mouse (like {{ cssxref(":hover") }} which lets you know if the mouse is over an element or not).</p>
<h2 id="Syntax">Syntax</h2>
<pre>
selector:pseudo-class {
  property: value;
} 
</pre>
<h2 id="Examples">Examples</h2>
<ul>
  <li>{{ Cssxref(":link") }}</li>
  <li>{{ Cssxref(":visited") }}</li>
  <li>{{ Cssxref(":active") }}</li>
  <li>{{ Cssxref(":hover") }}</li>
  <li>{{ Cssxref(":focus") }}</li>
  <li>{{ Cssxref(":first-child") }}</li>
</ul>
<p>The following list is of some CSS3 level pseudo-class examples and may not have full browser support. Use fallback methods or JavaScript when necessary. To see a complete list of selectors, visit <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" target="_blank" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a></p>
<ul>
  <li>{{ Cssxref(":nth-child") }}</li>
  <li>{{ Cssxref(":nth-last-child") }}</li>
  <li>{{ Cssxref(":nth-of-type") }}</li>
  <li>{{ Cssxref(":first-of-type") }}</li>
  <li>{{ Cssxref(":last-of-type") }}</li>
  <li>{{ Cssxref(":empty") }}</li>
  <li>{{ Cssxref(":target") }}</li>
  <li>{{ Cssxref(":checked") }}</li>
  <li>{{ Cssxref(":enabled") }}</li>
  <li>{{ Cssxref(":disabled") }}</li>
</ul>
<!-- languages({ "fr": "fr/docs/CSS/Pseudo-classes", "ja": "ja/docs/CSS/Pseudo-classes" }) -->
Revert to this revision