In this article, we will learn about Pseudo selectors in CSS.

Pseudo Selectors

Pseudo Selectors are special types of selectors in CSS. They are used to style the specific attribute of the specific element in CSS.

Pseudo Selectors are further classified into two categories:

• Pseudo class
• Pseudo element

lets’s discuss both Pseudo selectors in detail.

Pseudo Class

A pseudo-class is a keyword added to a selector that specifies the selected element’s special state. For example: When the user’s pointer hovers over a button, we can change its color using the ‘: hover ‘ pseudo-class.

button:hover {
              color: black;
              background-color: lightgreen;
              }

Output:

Pseudo-classes allows us to apply the style to an element that not only applies in relation to the document tree’s content, but also applies in relation to external factors such as the navigator’s history (like ‘: visited’), the status of its content (like ‘: checked’), or the mouse position (like ‘: hover’).

The following are pseudo-classes defined by a set of CSS specifications:

: active	: any-link	: autofill	: blank	: checked
: current	: default	: defined	: dir()	: disabled
: empty	: enabled	: first	: first-child	: first-of-type
: fullscreen	: future	: focus	: focus-visible	: focus-within
: has()	: host	: host-context()	: hover	: indeterminate
: in-range	: invalid	: is()	: lang()	: last-child
: last-of-type	: left	: link	: local-link	: not(selector)
: nth-child(n)	: nth-col	: nth-last-child(n)	: nth-last-col	: nth-last-of-type(n)
: nth-of-type(n)	: only-child	: only-of-type	: optional	: out-of-range
: past	: picture-in-picture	: placeholder-shown	: paused	: playing
: read-only	: read-write	: required	: right	: root
: scope	: state()	: target	: target-within	: user-invalid
: valid	: visited	: where()

That’s about pseudo-classes. Now, let’s look at the pseudo-elements.

Pseudo Element

A pseudo-element is a keyword that we can add to a selector to style a specific part of the element (s). for example: ‘::first-line’, can be used to change the color of a paragraph’s first line.

p::first-line {
               color: Green;
               }

Output:

In a selector, we can only use one pseudo-element. and It must come after the statement’s simple selectors.

Instead of a single colon, double colons (::) should be used as a rule (:). Pseudo-classes are distinguished from pseudo-elements by this. Most browsers support both syntaxes for the original pseudo-elements because this distinction was not present in earlier versions of the W3C spec.

The following are pseudo-elements:

:: after (: after)	:: before (: before)	:: backdrop	:: cue
:: cue-region	:: first-letter (: first-letter)	:: first-line (: first-line)	:: file-selector-button
:: grammar-error	:: marker	:: part()	:: placeholder
:: selection	:: slotted()	:: spelling-error	:: target-text

That’s all about the Pseudo selectors in CSS.

Hope this article will guide you to recognize all about the Pseudo selectors in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.