Css Pseudo Selectors/Classes

In CSS, pseudo selectors are a special selectors that are used to select and style elements based on their state or position within the document tree. Css Pseudo selectors / classes are preceded by a colon (:) followed by the the by the selectors to define specific conditions or states.

Here are some commonly used Css pseudo Selectors:

1.            :hover – This Css pseudo selector is Used to target an element when the user hovers over it with the cursor.

2.            :active – Use to targets an element while it is being activated or clicked by the user.

3.            :focus – Use to targets an element that currently has focus, such as an input field or a link that has been clicked.

4.            :visited – Use to targets a link that has been visited by the user.

5.            :first-child – Use to targets the first child element of its parent.

6.            :last-child – Use to targets the last child element of its parent.

7.            :nth-child(n) – Use to targets the nth child element of its parent. It can be used with numeric values, keywords (e.g., even, odd), or formulas (e.g., 2n+1).

8.            :nth-of-type(n) – Use to targets the nth element of a specific type within its parent.

9.            :nth-last-child(n) – Use to targets the nth child element counting from the end of its parent.

10.          :nth-last-of-type(n) – Use to targets the nth element of a specific type counting from the end of its parent.

11.          :not(selector) – Use to targets elements that do not match the specified selector.

12.          :empty – Use to targets elements that have no children or text content.

13.          :checked – Use to targets an input element that is checked, such as a checkbox or radio button.

14.          :disabled – Use to targets form elements that are disabled.

15.          :required – Use to targets form elements that are required.

These are just a few examples of the many pseudo-classes available in CSS.

You can also learn how to use the ::before and ::after pseudo selectors.

Pseudo selectors provide a way to target elements based on various states and conditions, allowing for more specific and dynamic styling of elements on a web page.