Skip to main content

Command Palette

Search for a command to run...

Pseudo-classes element in CSS

All about Pseudo- Class elements that's provides us to create beautiful web like hover anything.

Published
5 min read

Pseudo -Classes CSS pseudo-classes are used to add special effects to some selectors. You do not need to use JavaScript or any other script to use those effects. Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover:

a:hover {
    /* hover is a pseudo class*/
}
Syntax
selector:pseudo-class {
property: VALUE;
}

List of pseudo-classes:

Name and Description

:active Applies to any element being activated (i.e. clicked) by the user.

:any Allows 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.

:target Selects the current active #news element (clicked on a URL containing that anchor name)

:checked Applies to radio, checkbox, or option elements that are checked or toggled into an "on" state.

:default Represents any user interface element that is the default among a group of similar elements.

:disabled Applies to any UI element which is in a disabled state.

:empty Applies to any element which has no children.

:enabled Applies to any UI element which is in an enabled state.

:first Used in conjunction with the page rule, this selects the first page in a printed document.

:first-child Represents any element that is the first child element of its parent.

:first-of-type Applies when an element is the first of the selected element type inside its parent. This may or may not be the first-child.

:focus Applies 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-within Can 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-screen Applies to any element displayed in full-screen mode. It selects the whole stack of elements and not just the top level element.

:hover Applies to any element being hovered by the user's pointing device, but not activated.

:indeterminate Applies 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-range The :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.

:invalid Applies to elements whose values are invalid according to the type specified in the type= attribute.

:lang Applies to any element who's wrapping 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-child Represents any element that is the last child element of its parent.

:last-of-type Applies when an element is the last of the selected element type inside its parent. This may or may not be the last-child.

:left Used in conjunction with the page rule, this selects all the left pages in a printed document.

:link Applies 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 selector together.

:nth-child Applies 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-type Applies 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-child The :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.

:optional The :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-range The :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-shown Experimental. Applies to any form element currently displaying placeholder text.

:read-only Applies to any element which is not editable by the user.

:read-write Applies to any element that is editable by a user, such as elements.

:right Used in conjunction with the page rule, this selects all the right pages in a printed document.

:root matches the root element of a tree representing the document.

:scope CSS pseudo-class matches the elements that are a reference point for selectors to match against.

:target Selects the current active #news element (clicked on a URL containing that anchor name)

:visited Applies to any links which have has been visited by the user.

Child Pseudo Class

"The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n"

pseudo-selector

if we have Ten numbers of class, div,or anthings what we want to select 1 2 3 4 5 6 7 8 9 10

example:

:first-child -- 1

:nth-child(3) --3

:nth-child(n+3) --3,4,5,6,7,8,9,10

:nth-child(3n) --3,6,9

:nth-child(3n+1) --1,3,6,9

:nth-child(-n+3) --1,2,3

:nth-child(odd) --1,3,5,7,9

:nth-child(even) --2,4,6,8,10

:last-child --10

:nth-last-child(3) --8