CSS Selectors Pseudo-classes

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

Pseudo-classes are keywords which allow selection based on information that lies outside of the document tree or that cannot be expressed by other selectors or combinators. This information can be associated to a certain state (state and dynamic pseudo-classes), to locations (structural and target pseudo-classes), to negations of the former (negation pseudo-class) or to languages (lang pseudo-class). Examples include whether or not a link has been followed (:visited), the mouse is over an element (:hover), a checkbox is checked (:checked), etc.

Syntax

selector:pseudo-class { 
    property: value;
}

List of pseudo-classes:

NameDescription
:activeApplies to any element being activated (i.e. clicked) by the user.
:anyAllows you to build sets of related selectors by creating groups that the
included items will match. This is an alternative to repeating an entire selector.
:targetSelects the current active #news element (clicked on a URL
containing that anchor name)
:checkedApplies to radio, checkbox, or option elements that are checked
or toggled into an "on" state.
:defaultRepresents any user interface element that is the default among a group of
similar elements.
:disabledApplies to any UI element which is in a disabled state.
:emptyApplies to any element which has no children.
:enabledApplies to any UI element which is in an enabled state.
:firstUsed in conjunction with the @page rule, this selects the first page in a
printed document.
:first-childRepresents any element that is the first child element of its parent.
:first-of-typeApplies when an element is the first of the selected element type
inside its parent. This may or may not be the first-child.
:focusApplies to any element which has the user's focus. This can be given by the
user's keyboard, mouse events, or other forms of input.
:focus-withinCan be used to highlight a whole section when one element inside it is focused. It matches any element that the :focus pseudo-class matches or that has a descendant focused.
:full-screenApplies to any element displayed in full-screen mode. It selects the whole stack
of elements and not just the top level element.
:hoverApplies to any element being hovered by the user's pointing device, but
not activated.
:indeterminateApplies radio or checkbox UI elements which are neither checked nor
unchecked, but are in an indeterminate state. This can be due to an
element's attribute or DOM manipulation.
:in-rangeThe :in-range CSS pseudo-class matches when an element has
its value attribute inside the specified range limitations for this element.
It allows the page to give a feedback that the value currently defined
using the element is inside the range limits.
:invalidApplies to <input> elements whose values are invalid according to
the type specified in the type= attribute.
:langApplies to any element who's wrapping <body> element has a properly
designated lang= attribute. For the pseudo-class to be valid, it must
contain a valid two or three letter language code.
:last-childRepresents any element that is the last child element of its parent.
:last-of-typeApplies when an element is the last of the selected element type inside
its parent. This may or may not be the last-child.
:leftUsed in conjunction with the @page rule, this selects all the left
pages in a printed document.
:linkApplies to any links which haven't been visited by the user.
:not()Applies to all elements which do not match the value passed to
(:not(p) or :not(.class-name) for example. It must have a value to be
valid and it can only contain one selector. However, you can chain multiple :not selectors together.
:nth-childApplies when an element is the n-th element of its parent, where n
can be an integer, a mathematical expression (e.g n+3) or the keywords
odd or even.
:nth-of-typeApplies when an element is the n-th element of its parent of the
same element type, where n can be an integer, a mathematical
expression (e.g n+3) or the keywords odd or even.
:only-childThe :only-child CSS pseudo-class represents any element
which is the only child of its parent. This is the same as
:first-child:last-child or :nth-child(1):nth-last-child(1),
but with a lower specificity.
:optionalThe :optional CSS pseudo-class represents any element
that does not have the required attribute set on it. This allows
forms to easily indicate optional fields and to style them accordingly.
:out-of-rangeThe :out-of-range CSS pseudo-class matches when an element has its
value attribute outside the specified range limitations for this element.
It allows the page to give a feedback that the value currently defined using the
element is outside the range limits. A value can be outside of a range if it is
either smaller or larger than maximum and minimum set values.
:placeholder-shownExperimental. Applies to any form element currently displaying placeholder text.
:read-onlyApplies to any element which is not editable by the user.
:read-writeApplies to any element that is editable by a user, such as <input> elements.
:rightUsed in conjunction with the @page rule, this selects all the right pages in a
printed document.
:rootmatches the root element of a tree representing the document.
:scopeCSS pseudo-class matches the elements that are a reference
point for selectors to match against.
:targetSelects the current active #news element (clicked on a URL
containing that anchor name)
:visitedApplies to any links which have has been visited by the user.

The :visited pseudoclass can't be used for most styling in a lot of modern browsers anymore because it's a security hole. See this link for reference.



Got any CSS Question?