demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Pseudo-class selectors

css / selectors

Estimated reading time: 2 minutes, 3 seconds

Pseudo-class selectors affect elements in certain states: for example, a:hover controls the appearance of links during a momentary touch on a mobile device, or on mouse hover. In contrast, pseudo-element selectors control the appearance of portions of an element’s content, such as the first line or letter of a paragraph.

The table below covers all the current pseudo-class selectors, with links to articles detailing each:

CSS Pseudo-class selectors
Pseudo-class selectorPurpose
:linkControls the appearance of an unvisited link. Strongly associated with the a tag, to the point at which the a selector used by itself before a style declaration accomplishes the same thing.
:visitedControls the appearance of visited links. Quite a few restrictions on styles in terms of what can be applied, due to security risks.
:hoverControls the appearance of an element while it is being hovered over with a mouse or other pointing device. While it is heavily associated with the a tag, CSS does not explicitly specify this association. In modern browsers, :hover can be applied to any arbitrary element, such as img:hover.
:activeThe appearance of content while the user is clicking on it, i.e. between the mouse button being held down and it being released. Rarely used, since the effect is usually transient.
:first-childSelects the first child element of a markup sequence. For example, ul li:first-child would specify that the style declaration applies to the first li element in any unordered list.
:last-childSelects the last child element in a sequence.
:nth-child(n) Selects children in an element sequence, in iterations of (n), where n is the word odd, even, a number, or a mathematical expression.
:nth-of-type(n) Selects the nth appearance of a particular element.
:focusSelects links that have been reached via keyboard navigation and form elements that are selected, such as text inputs and textareas.
:only-childSelects an element if it is the only child of a parent.
:first-of-typeSelects the first appearance of an element
:last-of-typeSelects the last appearance of an element.
:only-of-typeSelects an element if it is the only child of a particular type inside its parent.
:nth-last-child(n)Counts backwards from the end of a set of child elements.
:nth-last-of-type(n)Counts backwards from the end of a set of child elements to include a certain sequence of tags.
:not(S)Matches elements that are not (S).
:validThe state of a form element that is considered valid to a defined pattern of characters or numbers.
:invalidThe state of a form element with content that is considered invalid.
:checkedSelects form elements that are checked, such as radio buttons and checkboxes.

Note that pseudo-selectors can be strung together: a:visited:hover, for example.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.