Pseudo-classes:

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements. in a simple word we can define as a pseudo-class is used to define a special state of an element.

syntax :

selector:pseudo-class {
  property: value;
}

example:

:hover can be used to change a button's color when the user's pointer hovers over it.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

index of all pseudo-class:

1. :active

• :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

Example :

CSS

.joinBtn:active {
    box-shadow: 2px 2px 5px #fc894d;
}

2. :any-link

• :any-link CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited.

Example :

p {
    font-weight: bold;
}

a:any-link {
    color: forestgreen;
    text-decoration-color: hotpink;
}

3. :autofill

• :autofill CSS pseudo-class matches when an element has its value autofilled by the browser. The class stops matching if the user edits the field.

EXAMPLE :

input:autofill {
    border: 3px solid darkorange;
}

input:-webkit-autofill {
    border: 3px solid darkorange;
}

4. :blank

• :blank CSS pseudo-class selects empty user input elements .

EXAMPLE :

HTML

<textarea></textarea>

CSS

textarea:blank {
  border: 3px solid red;
}

5. :checked

• :checked CSS pseudo-class selector represents any radio (), checkbox (), or option () element that is checked or toggled to an on state.

EXAMPLE :

label,
input[type='submit'] {
    display: block;
    margin-top: 1em;
}

input:checked {
    border: none;
    outline: 2px solid deeppink;
}

6. :current

7. :default

• :default CSS pseudo-class selects form elements that are the default in a group of related elements.

EXAMPLE :

input:default {
    border: none;
    outline: 2px solid deeppink;
}

8. :defined

• :defined CSS pseudo-class represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been successfully defined (i.e. with the CustomElementRegistry.define() method).

EXAMPLE :

/* Selects any defined element */
:defined {
  font-style: italic;
}

/* Selects any instance of a specific custom element */
simple-custom:defined {
  display: block;
}

9. :dir()

• :dir() CSS pseudo-class matches elements based on the directionality of the text contained in them.

EXAMPLE :

/* Selects any element with right-to-left text */
:dir(rtl) {
  background-color: red;
}

10. :disabled

: disabled CSS pseudo-class represents 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.

EXAMPLE :

/* Selects any disabled <input> */
input:disabled {
  background: #ccc;
}

11. :empty

The :empty CSS pseudo-class represents 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.

EXAMPLE :

div:empty {
    outline: 2px solid deeppink;
    height: 1em;
}

12. :enabled

The :enabled CSS pseudo-class represents 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.

EXAMPLE :

/* Selects any enabled <input> */
input:enabled {
  color: blue;
}

13. :first

The :first CSS pseudo-class, used with the @page at-rule, represents the first page of a printed document. (See :first-child for general first element of a node.)

EXAMPLE :

/* Selects the first page when printing */
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
Copy to Clipboard

14. :first-child

The :first-child CSS pseudo-class represents the first element among a group of sibling elements.

EXAMPLE :

p {
    font-weight: bold;
}

li:first-child {
    border: 2px solid orange;
}

15. :first-of-type

The :first-of-type CSS pseudo-class represents the first element of its type among a group of sibling elements.

EXAMPLE :

dt {
    font-weight: bold;
}

dd {
    margin: 3px;
}

dd:first-of-type {
    border: 2px solid orange;
}

16. :fullscreen

The :fullscreen CSS pseudo-class matches every element which is currently in fullscreen mode. If multiple elements have been put into fullscreen mode, this selects them all.

EXAMPLE :

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

17. :future

The :future CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely after an element that matches

EXAMPLE :

:future(p, span) {
  display: none;
}

18. :focus

The :focus CSS pseudo-class represents 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.

EXAMPLE :

label {
    display: block;
    margin-top: 1em;
}

input:focus {
    background-color: lightblue;
}

select:focus {
    background-color: ivory;
}

19. :focus-visible

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)

EXAMPLE :

label {
    display: block;
    margin-top: 1em;
}

input:focus-visible {
    outline: 2px solid crimson;
    border-radius: 3px;
}

select:focus-visible {
    border: 2px dashed crimson;
    border-radius: 3px;
    outline: none;
}

20. :focus-within

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

EXAMPLE :

label {
    display: block;
    margin-top: 1em;
}

label:focus-within {
    font-weight: bold;
}

21. :has()

The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters (relative to the :scope of the given element) match at least one element.

The :has() pseudo-class takes a relative selector list as an argument.

SYNTAX :

:has( <forgiving-relative-selector-list> )

EXAMPLE :

a:has(> img)

22. :host

The :host CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.

Note: This has no effect when used outside a shadow DOM.

EXAMPLE :

/* Selects a shadow root host */
:host {
  font-weight: bold;
}

23. :host()

The :host CSS pseudo-class selects the shadow host of the shadow DOM containing the CSS it is used inside — in other words, this allows you to select a custom element from inside its shadow DOM.

EXAMPLE :

/* Selects a shadow root host */
:host {
  font-weight: bold;
}

24. :host-context()

The :host-context() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.

EXAMPLE :

/* Selects a shadow root host, only if it is
   a descendant of the selector argument given */
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

/* Changes paragraph text color from black to white when
   a .dark-theme class is applied to the document body */
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}

25. :hover

The :hover CSS pseudo-class matches 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).

EXAMPLE :

.joinBtn {
    width: 10em;
    height: 5ex;
    background-color: gold;
    border: 2px solid firebrick;
    border-radius: 10px;
    font-weight: bold;
    color: black;
    cursor: pointer;
}

.joinBtn:hover {
    background-color: bisque;
}

26. :indeterminate

The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate elements.

EXAMPLE :

/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

27. :in-range

The :in-range CSS pseudo-class represents an element whose current value is within the range limits specified by the min and max attributes.

EXAMPLE :

/* Selects any <input>, but only when it has a range
   specified, and its value is inside that range */
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

28. :invalid

The :invalid CSS pseudo-class represents any

, , or other element whose contents fail to validate.

EXAMPLE :

label {
    display: block;
    margin-top: 1em;
}

input:invalid {
    background-color: ivory;
    border: none;
    outline: 2px solid red;
    border-radius: 5px;
}

29. :is()

The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

EXAMPLE :

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

30. :lang()

The :lang() CSS pseudo-class matches elements based on the language they are determined to be in.

EXAMPLE :

*:lang(en-US) {
    outline: 2px solid deeppink;
}

31. :last-child

The :last-child CSS pseudo-class represents the last element among a group of sibling elements.

EXAMPLE :

p {
    font-weight: bold;
}

li:last-child {
    border: 2px solid orange;
}

32. :last-of-type

The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.

EXAMPLE :

dt {
    font-weight: bold;
}

dd {
    margin: 3px;
}

dd:last-of-type {
    border: 2px solid orange;
}

33. :left

The :left CSS pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed document.

EXAMPLE :

/* Selects any left-hand pages when printing */
@page :left {
  margin: 2in 3in;
}

34. :link

The :link CSS pseudo-class represents an element that has not yet been visited. It matches every unvisited or element that has an href attribute. EXAMPLE :

p {
    font-weight: bold;
}

a:link {
    color: forestgreen;
    text-decoration-color: hotpink;
}

35. :local-link

The :local-link CSS pseudo-class represents a link to the same document. Therefore an element that is the source anchor of a hyperlink whose target's absolute URL matches the element's own document URL.

EXAMPLE :

/* Selects any <a> that links to the current document */
a:local-link {
  color: green;
}

36. :modal

The :modal CSS pseudo-class matches an element that is in a state in which it excludes all interaction with elements outside it until the interaction has been dismissed. Multiple elements can be selected by the :modal pseudo-class at the same time, but only one of them will be active and able to receive input.

EXAMPLE :

:modal {
  border: 5px solid red;
  background-color: yellow;
  box-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}

37. :not()

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

EXAMPLE :

/* Selects any element that is NOT a paragraph */
:not(p) {
  color: blue;
}

38. :nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

EXAMPLE :

p {
    font-weight: bold;
}

li:nth-child(-n+3) {
    border: 2px solid orange;
    margin-bottom: 1px;
}

li:nth-child(even) {
    background-color: lightyellow;
}

39. :nth-col()

The :nth-col() CSS pseudo-class is designed for tables and grids. It accepts the An+B notation such as used with the :nth-child selector, using this to target every nth column. The values odd and even are also valid.

EXAMPLE :

/* Selects every odd column in a table */
:nth-col(odd) {
  background-color: pink;
}

40. :nth-last-child()

The :nth-last-child() CSS pseudo-class matches elements based on their position among a group of siblings, counting from the end.

EXAMPLE :

p {
    font-weight: bold;
}

li:nth-last-child(-n+3) {
    border: 2px solid orange;
    margin-top: 1px;
}

li:nth-last-child(even) {
    background-color: lightyellow;
}

41. :nth-last-col()

The :nth-last-col() CSS pseudo-class is designed for tables and grids. It accepts the An+B notation such as used with the :nth-child selector, using this to target every nth column before it, therefore counting back from the end of the set of columns. The values odd and even are also valid.

EXAMPLE :

/* Selects every odd column in a table */
:nth-last-col(odd) {
  background-color: pink;
}

42. :nth-last-of-type()

The :nth-last-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name), counting from the end.

EXAMPLE :

dt {
    font-weight: bold;
}

dd {
    margin: 3px;
}

dd:nth-last-of-type(3n) {
    border: 2px solid orange;
}

43. :nth-of-type()

The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).

EXAMPLE :

dt {
    font-weight: bold;
}

dd {
    margin: 3px;
}

dd:nth-of-type(even) {
    border: 2px solid orange;
}

44. :only-child

The :only-child CSS pseudo-class represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

EXAMPLE :

li:only-child {
    color: fuchsia;
}

b:only-child {
    text-decoration: underline;
}

45. :only-of-type

The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type.

EXAMPLE :

a:only-of-type {
    color: fuchsia;
}

dd:only-of-type {
    background-color: bisque;
}

46. :optional

The :optional CSS pseudo-class represents any , , or

EXAMPLE :

/* Selects any optional <input> */
input:optional {
  border: 1px dashed black;
}

47. :out-of-range

The :out-of-range CSS pseudo-class represents an element whose current value is outside the range limits specified by the min and max attributes.

EXAMPLE :

/* Selects any <input>, but only when it has a range
   specified, and its value is outside that range */
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}

48. :past

The :past CSS pseudo-class selector is a time-dimensional pseudo-class that will match for any element which appears entirely before an element that matches

EXAMPLE :

:past(p, span) {
  display: none;
}

49. :picture-in-picture

The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.

EXAMPLE :

:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}

50. :placeholder-shown

The :placeholder-shown CSS pseudo-class represents any or

EXAMPLE :

label {
    display: block;
    margin-top: 1em;
}

input:placeholder-shown {
    background-color: ivory;
    border: 2px solid darkorange;
    border-radius: 5px;
}

51. :paused

The :paused CSS pseudo-class selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "paused".

A resource is paused either due to being in an non-activated state, or due to the user explicitly paused it.

EXAMPLE :

:paused {
  border: 5px solid orange;
}

52. :playing

The :playing CSS pseudo-class selector is a resource state pseudo-class that will match an audio, video, or similar resource that is capable of being "played" or "paused", when that element is "playing".

A resource is playing even if in buffering state or paused for any reason other than a user interaction to cause it to be paused.

EXAMPLE :

:playing {
  border: 5px solid green;
}

53. :read-only

The :read-only CSS pseudo-class represents an element (such as input or textarea) that is not editable by the user.

EXAMPLE :

label,
input[type='submit'] {
    display: block;
    margin-top: 1em;
}

*:read-only {
    font-weight: bold;
    color: indigo;
}

54. :read-write

The :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user.

EXAMPLE :

label,
input[type='submit'] {
    display: block;
    margin-top: 1em;
}

*:read-write {
    background-color: ivory;
    border: 2px solid darkorange;
    border-radius: 5px;
}

55. :required

the :required CSS pseudo-class represents any , , or

EXAMPLE :

/* Selects any required <input> */
input:required {
  border: 1px dashed red;
}

56. :right

The :right CSS pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document.

EXAMPLE :

/* Selects any right-hand pages when printing */
@page :right {
  margin: 2in 3in;
}

57. :root

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the element and is identical to the selector html, except that its specificity is higher.

EXAMPLE :

/* Selects the root element of the document:
   <html> in the case of HTML */
:root {
  background: yellow;
}

58. :scope

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

EXAMPLE :

/* Selects a scoped element */
:scope {
  background-color: lime;
}

59. :state()

EXAMPLE :

60. :target

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

EXAMPLE :

/* Selects an element with an ID matching the current URL's fragment */
:target {
  border: 2px solid black;
}

61. :target-within

The :target-within CSS pseudo-class represents an element that is a target element or contains an element that is a target. A target element is a unique element with an id matching the URL's fragment. In other words, it represents an element that is itself matched by the :target pseudo-class or has a descendant that is matched by :target. (This includes descendants in shadow trees.)

EXAMPLE :

/* Selects a <div> when one of its descendants is a target */
div:target-within {
  background: cyan;
}

62. :user-invalid

The :user-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted with it.

The :user-invalid pseudo-class must match an :invalid, :out-of-range, or blank-but :required element between the time the user has attempted to submit the form and before the user has interacted again with the form element.

EXAMPLE :

input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}

63. :valid

The :valid CSS pseudo-class represents any or other

element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

EXAMPLE :

label {
    display: block;
    margin-top: 1em;
}

input:valid {
    background-color: ivory;
    border: none;
    outline: 2px solid deepskyblue;
    border-radius: 5px;
    accent-color: gold;
}

64. :visited

The :visited CSS pseudo-class represents links that the user has already visited. For privacy reasons, the styles that can be modified using this selector are very limited.

EXAMPLE :

p {
    font-weight: bold;
}

a:visited {
    color: forestgreen;
    text-decoration-color: hotpink;
}

65. :where()

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

EXAMPLE :

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

YOU CAN READ MORE ABOUT PSEUDO -CLASS BY MDN