In CSS pseudo-class is a keyword that is added to a selector that specifies the state of the selected element. For example, the :hover can be used to select a button when a user pointer hovers over the button and this selected button can be styled.

button:hover {
    background-color: blue;
}

how does it write?

A pseudo-class consist of a ( : ) colon followed by the pseudo-class name (example. :hover).

Pseudo-classes let you apply a style to an element not only about the content of the document tree but also about external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

::before and ::after the element

In CSS, ::before used to apply the style element with the content property. It is inline by default. it will apply the content before the element which is selected.

let's take the example.

As we can see in the above code, the icon is attached before google.com. Similar to before, ::after applies content after the element which is selected.

: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).

:first-child()

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

we can see in the Result, the First Item is different than other items present in the list.

:nth-child()

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings. :nth-child() takes a single argument that describes a pattern-matching element in the list of siblings.

:nth-child(<nth> [of <complex-selector-list>])

We can also use keyword values like odd and even to apply properties to odd or even elements in the list of siblings. We can also use functional notation like <An+B>, where A represents an integer step size, B is an integer offset and n is all nonnegative integers, starting from 0. It can be read as the An+B-th element of a list.

There are different pseudo-classes are available in the CSS. You can read more on MDN Docs. This is all about the Pseudo-class in CSS, will talk about positions in CSS in an upcoming article. Thanks for reading.