Strictly speaking, all pseudo-classes (like all selectors) are structural: they are, after all, dependent on document structure in some fashion. What sets the pseudo-classes listed here apart is that they are intrinsically about patterns found in the structure of the document: for example, selecting every other paragraph or elements that are the last children of their parent element.
Applies to
Any element
Description
Matches elements that have no child nodes—that is, no child elements or content nodes. Content nodes are defined as any text, whitespace, entity reference, or CDATA nodes. Thus, <p> </p> is not empty because it has a single whitespace character inside it; nor is the element empty if that space is replaced with a newline. Note that this pseudo-class does not apply to empty elements such as <br>, <img>, <input>, and so on.
Examples
p:empty {padding: 1em; background: red;}
div:not(:empty) {border: 1px solid;padding: 1ch;}
li:empty {display: none;}
Applies to
Any element
Description
Matches an element when it is the first child of another element. Thus, div:first-child will select any div that is the first child of another element, not the first child element of any div.
Examples
td:first-child {border-left: 1px solid;}
p:first-child {text-indent: 0; margin-top: 2em;}
Applies to
Any element
Description
Matches an element when it is the first child of its type, as compared to all its sibling elements. Thus, div:first-of-type will select any div that is the first child div of another element.
Examples
td:first-of-type {border-left: 1px dotted;}
h2:first-of-type {color: fuchsia;}
Applies to
Any element with associated language-encoding information.
Description
Matches elements based on their human-language encoding. Such language information must be contained within, or otherwise associated with, the document—it cannot be assigned from CSS. The handling of :lang is the same as for |= attribute selectors.
Examples
html:lang(en) {background: silver;}
*:lang(fr) {quotes: '«' '»';}
Applies to
Any element
Description
Matches an element when it is the last child of another element. Thus, div:last-child will select any div that is the last child of another element, not the last child element of any div.
Examples
td:last-child {border-right: 1px solid;}
p:last-child {margin-bottom: 2em;}
Applies to
Any element
Description
Matches an element when it is the last child of its type, as compared to all its sibling elements. Thus, div:last-of-type will select any div that is the last child div of another element.
Examples
td:last-of-type {border-right: 1px dotted;}
h2:last-of-type {color: fuchsia;}
Applies to
Any element
Description
Matches every nth child with the pattern of selection defined by the formula an±b, where a and b are <integer>s and n represents an infinite series of integers, counting forward from the first child. Thus, to select every fourth child of the body element, starting with the first child, you would write body > *:nth-child(4n+1). This will select the first, fifth, ninth, fourteenth, and so on children of the body.
If you literally wish to select the fourth, eighth, twelfth, and so on children, you can modify the selector to body > *:nth-child(4n). It is also possible for b to be negative: body > *:nth-child(4n–1) selects the third, seventh, eleventh, fifteenth, and so on children of the body.
In place of the an±b formula, there are two keywords permitted: even and odd. These are equivalent to 2n and 2n+1, respectively.
Examples
*:nth-child(4n+1) {font-weight: bold;}
tbody tr:nth-child(odd) {background-color: #EEF;}
Applies to
Any element
Description
Matches every nth child with the pattern of selection defined by the formula an±b, where a and b are <integer>s and n represents an infinite series of integers, counting backward from the last child. Thus, to select every fourth-to-last child of the body element, starting with the last child, you would write body > *:nth-last-child(4n+1). This is, in effect, the mirror image of :nth-child.
In place of the an±b formula, there are two keywords permitted: even and odd. These are equivalent to 2n and 2n+1, respectively.
Examples
*:nth-last-child(4n+1) {font-weight: bold;}
tbody tr:nth-last-child(odd) {
background-color: #EEF;}
Applies to
Any element
Description
Matches every nth child that is of the same type as the element named, with the pattern of selection defined by the formula an±b, where a and b are <integer>s and n represents an infinite series of integers, counting backward from the last such element. Thus, to select every third-to-last paragraph (p) that is a child of the body element, starting with the first such paragraph, you would write body > p:nth-last-of-type(3n+1). This holds true even if other elements (e.g., lists, tables, or other elements) are interspersed between the various paragraphs.
In place of the an±b formula, there are two keywords permitted: even and odd. These are equivalent to 2n and 2n+1, respectively.
Examples
td:nth-last-of-type(even) {
background-color: #FCC;}
img:nth-last-of-type(3n) {float: left;
border: 2px solid;}
Applies to
Any element
Description
Matches every nth child that is of the same type as the element named, with the pattern of selection defined by the formula an±b, where a and b are <integer>s and n represents an infinite series of integers, counting forward from the first such element. Thus, to select every third paragraph (p) that is a child of the body element, starting with the first such paragraph, you would write body > p:nth-of-type(3n+1). This will select the first, fourth, seventh, tenth, and so on child paragraphs of the body. This holds true even if other elements (e.g., lists, tables, or other elements) are interspersed between the various paragraphs.
In place of the an±b formula, there are two keywords permitted: even and odd. These are equivalent to 2n and 2n+1, respectively.
Examples
td:nth-of-type(even) {background-color: #FCC;}
img:nth-of-type(3n) {float: right;}
Got Something To Say: