CSS tutorial

Pseudo classes

Pseudo class selector specifies a special state of the selected element(s).

Styles defined by these selectors can be overridden by each other. To style links properly use LVHA-order: :link — :visited — :hover — :active.

namedescription
:linkRepresents an element that has not yet been visited. It matches every unvisited a, area or link element that has an href attribute.
:visitedRepresents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.
:hoverMatches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
:activeRepresents an element that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button. Usually used with a and button elements.

Selecting child elements

namedescription
:emptyRepresents any element that has no children. Children can be either element nodes or text, including whitespace. Comments, processing instructions, and CSS content do not affect whether an element is considered empty.
:first-childRepresents the first element among a group of sibling elements.
:first-of-typeRepresents the first element of its type among a group of sibling elements. 
/* select all p that is the first 
p element in its parent*/
p:first-of-type {
...
}
:nth-child(n) Matches elements based on their position in a group of siblings.
  • n - can be number, expression like An+B, predefined name:
    • odd - expression 2n+1
    • even - expression 2n
/* Selects the second li element 
in a list */
li:nth-child(2) { 
  color: lime;
}
See more examples.
:nth-of-type(n) Matches elements of a given type, based on their position among a group of siblings.
  • n - can be number, expression like An+B, predefined name:
    • odd - expression 2n+1
    • even - expression 2n
:nth-last-child(n)Matches elements based on their position among a group of siblings, counting from the end. n like at :nth-child(n).
:nth-last-of-type(n)Matches elements of a given type, based on their position among a group of siblings, counting from the end. n like :nth-of-type(n)
:last-childRepresents the last element among a group of sibling elements.
:last-of-typeRepresents the last element of its type among a group of sibling elements.
:only-childRepresents an element without any siblings.
:only-of-typeRepresents an element that has no siblings of the same type.

Selecting elements of form

namedescription
:checkedRepresents an element that has not yet been visited. It matches every unvisited a, area or link element that has an href attribute.
:disabledRepresents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.
:enabledRepresents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus.
:focusRepresents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key.
:in-range Represents an input element whose current value is within the range limits specified by the min and max attributes.
:invalidRepresents any input or other form element whose contents fail to validate.
:optionalRepresents any input, select, or textarea element that does not have the required attribute set on it.
:out-of-rangeRepresents an input element whose current value is outside the range limits specified by the min and max attributes.
:read-onlyRepresents an element input or textarea that is not editable by the user.
:read-writeRepresents an element input or textarea that is editable by the user.
:requiredRepresents any input, select or textarea element that has the required attribute set on it. It is useful for highlighting fields that must have valid data before a form can be submitted.
:validrepresents any input or other form element whose contents validate successfully. It is useful for highlighting correct fields for the user.

Other pseudo classes

namedescription
:lang(l)Matches elements based on the language they are determined to be in.
  • l - language code
/* Selects any 
 in English (en) */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}
:notRepresents elements that do not match a list of selectors. The list must not contain another negation selector or a pseudo selector. The ability to list more than one selector is experimental and not yet widely supported.
:rootMatches the root element of a tree representing the document. So in HTML document it is html element.