Pseudo-Class - :nth-last-child()

Pattern: :nth-last-child(Nth) The argument Nth is of the following format: ODD ​Odd numbers, the same signification as 2n+1 EVEN ​​Even, the same as 2n [-|+]?[0-9]+ ​E.g., 0, 6, +7 [-|+]?[0-9]+N[[-|+]?[0-9]+]? ​E.g., 5n, 2n+1, -2n+1   Definition: The :nth-last-child(Nth) pseudo-class represents every element that is the Nth child of its parent element, counting backward from the last child.   Examples: Style the last 3 <p> elements in their parent element p:nth-last-c

Pseudo-Class - :nth-of-type()

Pattern: :nth-of-type(Nth) The argument Nth is of the following format: ODD ​Odd numbers, the same signification as 2n+1 EVEN ​​Even, the same as 2n [-|+]?[0-9]+ ​E.g., 0, 6, +7 [-|+]?[0-9]+N[[-|+]?[0-9]+]? ​E.g., 5n, 2n+1, -2n+1   Definition: The ELEM:nth-of-type(Nth) pseudo-class represents every element that is the Nth ELEM type child of its parent element.   Examples: img:nth-of-type(2n+1) { background: magenta; }

Pseudo-Class - :nth-last-of-type()

Pattern: :nth-last-of-type(Nth) The argument Nth is of the following format: ODD ​Odd numbers, the same signification as 2n+1 EVEN ​​Even, the same as 2n [-|+]?[0-9]+ ​E.g., 0, 6, +7 [-|+]?[0-9]+N[[-|+]?[0-9]+]? ​E.g., 5n, 2n+1, -2n+1   Definition: The ELEM:nth-last-of-type(Nth) pseudo-class represents every element that is the Nth child of ELEM type of its parent element, counting backward from the last child.   Examples: Style every <p> element whose index is odd (2n+

Pseudo-Class - :first-child

Pattern: :first-child   Definition: The :first-child pseudo-class matches the first child of some other element. Thus, ELEM:first-child will select any ELEM that is the first child of another element.   Examples: Style every img element that is the first child of a div element div > img:first-child { background-color: lemonchiffon; }

Pseudo-Class - :last-child

Pattern: :last-child   Definition: The :last-child pseudo-class matches the last child of some other element. Thus, ELEM:last-child will select any ELEM that is the last child of another element.   Examples: Style every <a> element that is the last child of its parent a:last-child { text-decoration: underline; }

Pseudo-Class - :first-of-type

Pattern: :first-of-type   Definition: The :first-of-type pseudo-class matches the first child of its type in its parent element.   Examples: Style the first <h1> element of its parent element h1:first-of-type { color: hotpink; }

Pseudo-Class - :last-of-type

Pattern: :last-of-type   Definition: The :last-of-type pseudo-class matches the last child of its type in its parent element.   Examples: Style the last <ul> element of its parent element ul:last-of-type { border-left: 1px solid yellow; }

Pseudo-Class - :only-child

Pattern: :only-child   Definition: The :only-child pseudo-class matches any element that is the only child of its parent element.    Examples: Style every <img> element that is the only child of its parent element img:only-child { padding: 10px; }

Pseudo-Class - :only-of-type

Pattern: :only-of-type   Definition: The :only-of-type pseudo-class matches any element that is the only child of  its type in its parent element.    Examples: Style every <li> element that is the only child of its type in its parent element li:only-of-type { height: 100px; }

Pseudo-Class - :empty

Pattern: :empty   Definition: The :empty pseudo-class matches elements that have no children at all (including content nodes, such as text).   Examples: Style every empty <p> element p:empty { height: 10px; }