What are pseudo-classes and pseudo-elements in CSS, and how are they used?

Question

Ashutosh Kumar Verma · Answer

Pseudo-classes are used to define special states of an element. They allow you to style elements based on user interaction (such as hovering), their position in the DOM, or their state (such as having focus). Common pseudo-classes include,
:hover: Styles the element when the mouse pointer is over it.
:focus: Styles the element when it has focus (such as an input field).
:nth-child(n): Styles the element based on its position in the parent (for example, every third child).
Example-
a:hover { 
	color: red; 
}
Pseudo-elements are used to style a specific part of an element, such as the first letter, the first line, or to insert content before or after an element's content. Common pseudo-elements include,
::before: Inserts content before the element's actual content.
::after: Inserts content after the element's actual content.
::first-letter: Styles the first letter of the element.
::first-line: Styles the first line of the element.
Example-
p::first-letter { 
	font-size: 200%; 
	color: blue; 
}
and

interview

What are pseudo-classes and pseudo-elements in CSS, and how are they used?

Ashutosh Kumar Verma

1 Answers

Liked By