CSS Pseudo-Classes

CSS uses pseudo-class used to style the element at some special state, like changing background color on hover or altering text-color on visiting the link etc. Here’s list of pseudo-classes supported by CSS

Sr No Pseudo classDescription
1:active
the active link
2:checked
every checked <input> element
3:disabled
every disabled <input> element
4:empty
every

element that has no children

5:enabled
every enabled element
6:first-child
every

elements that is the first child of its parent

7:first-of-type
every

element that is the first

element of its parent

8:focus
the element that has focus
9:hover
links on mouse over
10:in-range
elements with a value within a specified range
11:invalid
all elements with an invalid value
12:lang(language)
every

element with a lang attribute value starting with "it"

13:last-child
every

elements that is the last child of its parent

14:last-of-type
every

element that is the last

element of its parent

15:link
all unvisited links
16:not(selector)
every element that is not a

element

17:nth-child(n)
every

element that is the second child of its parent

18:nth-last-of-type(n)
every

element that is the second

element of its parent,

19:nth-of-type(n)
counting from the last child
every

element that is the second

element of its parent

20:only-of-type
every

element that is the only

element of its parent

21:only-child
every

element that is the only child of its parent

22:optional
elements with no "required" attribute
23:out-of-range
elements with a value outside a specified range
24:read-only
elements with a "readonly" attribute specified
25:read-write
elements with no "readonly" attribute
26:root
the document's root element
27:valid

elements with a valid value

28:visited For visited links