CSS Pseudo Classes

Last Updated Jul 21, 2015, 12:00:06 PM




CSS Pseudo Classes

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.

A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

Syntax

CSS1 Pseudo Classes

CSS1 introduced the :link, :visited, and :active pseudo-classes, but only for the HTML a element. These pseudo-classes represented the state of links—unvisited, visited, or currently being selected—in a web page document

:link
Try It Now

:visited
Try It Now


Try It Now

CSS2 Pseudo Classes

CSS2 expanded the range of pseudo-classes and ensured that they could be applied to any element. :link and :visited now apply to any element defined as a link in the document language. While they remain mutually exclusive, the :active pseudo-class now joins :hover and :focus in the group of dynamic pseudo-classes. :hover
Try It Now

:focus
Try It Now

A simple selector can contain more than one pseudo-class if the pseudo-classes aren’t mutually exclusive. For example, the selectors a:link:hover and a:visited:hover are valid, but a:link:visited isn’t because :link and :visited are mutually exclusive. An element is either an unvisited link or a visited link.

CSS3 Pseudo Classes

CSS3 intrpduced many useful pseudo classes. The following table lists all the css3 pseudo classes with examples

Selector Example description Try It
element element Targets a specific element. Try It
:active a:active It selects all the active links on a webpage. Try It
:checked input:checked Selects every checked <input> element Try It
:disabled input:disabled It Selects every disabled <input> element Try It
:empty p:empty It selects every <p> element that has no children (including text nodes) Try It
:enabled input:enabled It selects every enabled <input> element Try It
:first-child p:first-child It selects every <p> element that is the first child of its parent Try It
:first-of-type p:first-of-type It selects every <p> element that is the first <p> element of its parent Try It
:link a:link It Selects all unvisited links Try It
:not(selector) :not(p) It selects every element that is not a <p> element Try It
:nth-child(n) p:nth-child(2) It selects every <p> element that is the second child of its parent Try It
:nth-last-child(n) p:nth-last-child(2) It selects every <p> element that is the second child of its parent, counting from the last child Try It
:nth-of-type(n) p:nth-of-type(2) It Selects every <p> element that is the second

element of its parent

 Try It
:only-of-type p:only-of-type It selects every <p> element that is the only

element of its parent

 Try It
:required input:required It selects input elements with the "required" attribute specified Try It

Browser compatibility
Feature
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)




Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM