Notice:
The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

pseudo-classes

< css‎ | selectors
Jump to: navigation, search

pseudo-classes

This article is Almost Ready.


Summary

Dynamic pseudo-classes classify elements on characteristics other than their name, attributes, or content, in principle characteristics that cannot be deduced from the document tree.


Page Summary
:target pseudo-class selector The :target pseudo-class (note the ":") represents an element in the current document, if any, that has id attribute set to a name that is matching the fragment identifier of the current URI.
:-ms-input-placeholder
:checked The :checked selector applies to toggable elements (e.g. radio buttons or checkboxes) that are toggled on.
:disabled
:empty
:enabled
:focus The :focus pseudo-class applies while an element has the focus, i.e. accepts keyboard or mouse events, or other forms of input.
:indeterminate
:invalid
:lang(c) The :lang(c) pseudo selector applies to documents that specifies the lang attribute to an HTML element. This allows to style based on which language (and/or dialect) a given section is written into.
:nth-last-child(n)
:nth-last-of-type(n)
:required
:root
:target
:valid



Usage

 A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :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 (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

Examples

/* unvisited links */
a:link    
/* visited links */
a:visited 
/* user hovers */
a:hover   
/* active links */
a:active

An example of combining dynamic pseudo-classes:

a:focus
a:focus:hover

The last selector matches a elements that are in the pseudo-class :focus and in the pseudo-class :hover.

Note: An element can be both ‘:visited’ and ‘:active’ (or ‘:link’ and ‘:active’).

Attribution

This article contains content originally from external sources.

Portions of this content come from the Mozilla Developer Network cc-by-sa-small-wpd.svg: Article