As we know very well what is class. let's jump into pseudo-classes .u may think about what is pseudo classes. Allow me to explain thoroughly.

pseudo-classes the special type of keyword which is added before the HTML element (Selected element ) for specifying a special state.

A pseudo-class consists of a colon (:) followed by the pseudo-class name. It has been used in a different way to achieve the work.

We have characterized the many pseudo-classes according to their property some of the importance we are going to understand.

For the display element we have :

A. Element display state: it is used for a display element.

we have different classes for that -

1. : fullscreen - Matches an element that is currently in fullscreen mode.

2. : modal - elements that will prevent user interaction with the rest of the page and will be selected by the : modal pseudo-class include:

   • The dialog element opened with the showModal() API.

   • The element selected by the : fullscreen pseudo-class when opened with the request fullscreen() API.

3. : picture-in-picture - configure your stylesheets to automatically adjust the size, style, or layout of content when a video switches back and forth between picture-in-picture and traditional presentation modes.

# B. Link-related**

1. : link – Perhaps the most confusion-causing link-related pseudo-selector. Aren’t all links? Well not if they don’t have an href attribute. This selects only those that do, thus is essentially the same as a[href].

2. : visited – Selects links that have already been visited by the current browser.

3. : hover – When the mouse cursor rolls over a link, that link is in its hover state and this will select it.

4. : active – Selects the link while it is being activated (being clicked on or otherwise activated). For example, for the “pressed” state of a button-style link or to [make all links feel more button-like]

   example -

   https://codepen.io/azmatone/embed/gOKdVmB?default-tab=html%2Cresult&editable=true&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"

Input pseudo-classes

1. :focus will select links that are the current focus of the keyboard. This is not limited to links, but can be used (and really should be used) on inputs and textareas as well.

   syntax

 :focus

1. : target - target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same

   syntax

:target { border: 2px solid black; }

Example-

Position/Number-based pseudo class selectors

1. :first-child – Selects the first element within a parent. :first-child selector allows you to target the first element immediately inside another element.

2. :last-child – Selects the last element within a parent. :last-child selector allows you to target the last element directly inside its containing element.

3. :nth-child() – Selects elements based on a simple provided algebraic expression (e.g. “2n” or “4n-1”). Has the ability to do things like select even/odd elements, “every third”, “the first five”, and things like that.

example

pseudo “elements”

1. ::before – Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps an preceding image to set apart a particular paragraph.

2. ::after – Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML markup

   EXAMPLE

   https://codepen.io/azmatone/embed/RwJebbd?default-tab=html%2Cresult&editable=true&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"