Sunny Books
What we have

CSS3 Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}

CSS Pseudo-classes

:link matches link elements that are determined to be unvisited.The two pseudo-classes :link and :visited are mutually exclusive: a link is either visited or unvisited.

:visited matches link elements that are determined to have been visited.

:active matches any element that's in the process of being activated.

:hover matches any element that's being designated by a pointing device.

:focus matches any element that has keyboard input focus.

:first-child matches an element only if it's the first child element of its parent element. For instance, li:first-child matches the first list item in an ol or ul element.

:lang(C) If you specify a language using this pseudo-class, it'll match any element for which the same language is specified.

CSS3 Pseudo-classes

CSS3 provides many more pseudo-classes.CSS3 Structural pseudo-classes are supported in Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+ to various degrees.

:nth-child(N) matches elements on the basis of their positions within a parent element's list of child elements.

:nth-last-child(N) matches elements on the basis of their positions within a parent element's list of child elements. The argument N can be a keyword, a number, or a number expression of the form an+b.

example 1: This selector will match any paragraph that's the last child element of its parent element:

p:nth-last-child(1) {declarations}

example 2: This example selector will match the last four list items in any list, be it ordered or unordered:

li:nth-last-child(-n+4){declarations}

:nth-of-type(N)matches elements on the basis of their positions within a parent element's list of child elements of the same type. The argument N can be a keyword, a number, or a number expression of the form an+b.

example 1: This example selectors will allow the application of different CSS styles to the odd- and even-numbered image elements that are children of the element whose id attribute value matches "gallery":

#gallery>img:nth-of-type(odd) {declarations}
#gallery>img:nth-of-type(even) {declarations}

example 2: This example selector matches the second, fifth, eighth, and so on, paragraphs in a div element, ignoring any children that aren't paragraphs:

div>p:nth-of-type(3n-1){declarations}

:nth-last-of-type(N) matches elements on the basis of their positions within a parent element's list of child elements of the same type. The argument N can be a keyword, a number, or a number expression of the form an+b.

example 1: This example selector will match the last three image elements that are children of the element whose id attribute value matches "gallery":

#gallery>img:nth-last-of-type(-n+3) {declarations}

:last-child matches an element that's the last child element of its parent element.

:first-of-type matches the first child element of the specified element type, and is equivalent to :nth-of-type(1).

example: This selector matches the first p element that's a child of a div element:

div>p:first-of-type {declarations}

:last-of-type matches the last child element of the specified element type, and is equivalent to :nth-last-of-type(1).

example: This selector matches the last p element that's a child of a div element:

div>p:last-of-type {declarations}

:only-child matches an element if it's the only child element of its parent.

example: This selector will match a list item element if it's the only list item in its parent ol or ul element:

li:only-child {declarations}

:only-of-type matches an element that's the only child element of its type.

example: This selector will match an img element that's the only child img element of its parent element:

img:only-of-type {declarations}

:root matches the element that's the root element of the document. In HTML documents, this selector matches the html element.

example: In an HTML document, this selector will match the html element:

:root {declarations}

:empty matches elements that have no children. Element nodes and non-empty text nodes are considered to be children; empty text nodes, comments, and processing instructions don't count as children. A text node is considered empty if it has a data length of zero; so, for example, a text node with a single space isn't empty.

:target matches an element that's the target of a fragment identifier in the document's URI.

:enabled matches user interface elements that are enabled. An element is enabled when it can be activated or can gain focus - this usually means the element can be selected, clicked on, or accept text input.

:disabled matches user interface elements that are disabled. An element is disabled when it can't be activated or accept focus.

:checked Pseudo-class matches elements like checkboxes or radio buttons that are checked. In HTML, this state corresponds to the selected and checked attributes.

:not(S) matches elements that aren't matched by the specified selector.

example: This selector matches all elements except table elements:

:not(table) {declarations}
SUNWEB EXPERT