User Action Pseudo-Class - :hover

Pattern: :hover   Definition: The :hover pseudo-class matches elements that are in a hovered (mouseover) state.   Examples: Style any <p> element when mouse over it p:hover { background-color: turquoise; }

Link Pseudo-Class - :visited

Pattern: :visited   Definition: The :visited pseudo-class matches links that have already been visited by the user.   Examples: Style all visited links a:visited { color: tomato; }

Link Pseudo-Class - :link

Pattern: :link   Definition: The :link pseudo-class matches links that have not been visited.   Examples: Style all unvisited links a:link { color: royalblue; }

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; }

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 - :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 - :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 - :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-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-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; }