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

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

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

User Action Pseudo-Class - :active

Pattern: :active   Definition: The :active pseudo-class matches any element that is being activated (E.g., when clicking on it) by the user.   Examples: Style any element when it is being activated *:active { background-color: wheat; }

User Action Pseudo-Class - :focus

Pattern: :focus   Definition: The :focus pseudo-class matches the element that has the focus (E.g., when an input field has the text-input cursor within it).   Examples: Style an input field when it has the focus input:focus { border: 2px dashed thistle; }

Target Pseudo-Class - :target

Pattern: :target   Definition: The :target pseudo-class matches the target element. (A target element is an URI refers to a location within the document. It ends with a "number sign" (#) followed by an anchor identifier.).   Examples: Style an <h2> element that is the target element of the referring URI. h2:target { border: 2px dashed burlywood; }

Language Pseudo-Class - :lang

Pattern: :lang   Definition: The :lang pseudo-class matches the elements based on their human-language information.   Examples: Style every <h1> element that has the en language (including "en-*") information. h1:lang(en) { background-color: lightpink; }

UI Element States Pseudo-Class - :enabled

Pattern: :enabled   Definition: The :enabled pseudo-class matches user interface elements that are in an enabled state (mostly used on form elements in (X)HTML).   Examples: Style all <input> elements that are in an enabled state. input:enabled { background-color: salmon; }

UI Element States Pseudo-Class - :disabled

Pattern: :disabled   Definition: The :disabled pseudo-class matches user interface elements that are in a disabled state (not able to accept user input).   Examples: Style all <input> elements that are in a disabled state. input:disabled { background-color: sienna; }

UI Element States Pseudo-Class - :checked

Pattern: :checked   Definition: The :checked pseudo-class matches radio and checkbox elements that have been toggled on (checked or filled).   Examples: Style all checked <input> elements input:checked { width: 50px; }