CSS Pseudo Class

CSS pseudo-classes are used to select elements based on their current state or dynamic behavior. Here are some of the commonly used pseudo-classes in CSS:

:hover: 

It is used to select an element when the mouse pointer is over it. For example:

a:hover {
 /* styles */
}

In this example, when the mouse pointer hovers over an a element, the specified styles will be applied.

:active: 

It is used to select an element while it is being clicked or activated. For example:

button:active {
 /* styles */
}

In this example, when a button element is being clicked or activated, the specified styles will be applied.

:focus: 

It is used to select an element that currently has focus. For example:

input:focus {
 /* styles */
}

In this example, when an input element has focus, the specified styles will be applied.

:first-child: 

It is used to select the first child of an element. For example:

li:first-child {
 /* styles */
}

In this example, the first li element in a list will be selected and the specified styles will be applied.

:nth-child(n): 

It is used to select the nth child of an element. For example:

li:nth-child(2) {
 /* styles */
}

In this example, the second li element in a list will be selected and the specified styles will be applied.

:nth-of-type(n): 

It is used to select the nth element of a certain type. For example:

less
Copy code
p:nth-of-type(2) {
 /* styles */
}

In this example, the second p element on the page will be selected and the specified styles will be applied.

:last-child: 

It is used to select the last child of an element. For example:

less
Copy code
li:last-child {
 /* styles */
}

In this example, the last li element in a list will be selected and the specified styles will be applied.

:nth-last-child(n): 

It is used to select the nth child of an element, counting from the end. For example:

less
Copy code
li:nth-last-child(2) {
 /* styles */
}

In this example, the second-to-last li element in a list will be selected and the specified styles will be applied.

These are just a few examples of the many pseudo-classes available in CSS. They are useful for creating dynamic styles that change based on user interaction or other factors.

Here are all the CSS pseudo-classes:

• :active: selects an element that is currently being activated or clicked.
• :checked: selects an input element that is checked.
• :disabled: selects a disabled element.
• :empty: selects an element that has no children.
• :enabled: selects an enabled element.
• :first-child: selects the first child element of a parent element.
• :first-of-type: selects the first element of a parent element with a specific tag name.
• :focus: selects an element that currently has focus.
• :hover: selects an element that the user is hovering over with the mouse.
• :indeterminate: selects an input element that is in an indeterminate state.
• :in-range: selects an input element with a value within a specified range.
• :invalid: selects an input element with an invalid value.
• :lang: selects an element with a specific language attribute value.
• :last-child: selects the last child element of a parent element.
• :last-of-type: selects the last element of a parent element with a specific tag name.
• :link: selects an unvisited link.
• :not: selects elements that do not match a specific selector.
• :nth-child: selects elements based on their position among their siblings.
• :nth-last-child: selects elements based on their position among their siblings, counting from the last child.
• :nth-last-of-type: selects elements based on their position among their siblings with a specific tag name, counting from the last child.
• :nth-of-type: selects elements based on their position among their siblings with a specific tag name.
• :only-child: selects an element that is the only child of a parent element.
• :only-of-type: selects an element that is the only element with a specific tag name in its parent element.
• :optional: selects an input element that does not have the required attribute.
• :out-of-range: selects an input element with a value outside a specified range.
• :read-only: selects an input element that is read-only.
• :read-write: selects an input element that is not read-only.
• :required: selects an input element that has the required attribute.
• :root: selects the root element of a document.
• :target: selects an element that is the target of the current URL.
• :valid: selects an input element with a valid value.
• :visited: selects a visited link.

Each pseudo-class has a specific purpose and can be used to style elements in different ways depending on their state or context.