Top 20 CSS Pseudo Classes Interview Questions Answers

Learn and master the top 20 CSS Pseudo Classes interview questions along with detailed answers and code snippets:

1. What are CSS pseudo-classes?
   CSS pseudo-classes are keywords that allow you to select and style elements based on certain states or conditions that cannot be represented by regular selectors.
   
2. How do you use the :hover pseudo-class in CSS?
   The :hover pseudo-class is used to select and style an element when the user hovers over it with the cursor.

button:hover {
  background-color: yellow; /* Styles the button when it is hovered over */
}

3. How do you use the :active pseudo-class in CSS?
   The :active pseudo-class is used to select and style an element while it is being activated or clicked by the user.

button:active {
  background-color: red; /* Styles the button when it is being clicked */
}

4. How do you use the :focus pseudo-class in CSS?
   The :focus pseudo-class is used to select and style an element that has received focus, such as an input field.

input:focus {
  border-color: blue; /* Styles the input field when it is focused */
}

5. How do you use the :first-child pseudo-class in CSS?
   The :first-child pseudo-class is used to select and style an element that is the first child of its parent.

ul li:first-child {
  font-weight: bold; /* Styles the first <li> element in a <ul> */
}

6. How do you use the :last-child pseudo-class in CSS?
   The :last-child pseudo-class is used to select and style an element that is the last child of its parent.

ul li:last-child {
  color: red; /* Styles the last <li> element in a <ul> */
}

7. How do you use the :nth-child pseudo-class in CSS?
   The :nth-child pseudo-class is used to select and style elements based on their position within a parent.

ul li:nth-child(odd) {
  background-color: yellow; /* Styles odd-numbered <li> elements in a <ul> */
}

8. How do you use the :nth-of-type pseudo-class in CSS?
   The :nth-of-type pseudo-class is used to select and style elements based on their position among elements of the same type within a parent.

ul li:nth-of-type(2n) {
  background-color: gray; /* Styles even-numbered <li> elements in a <ul> */
}

9. How do you use the :not pseudo-class in CSS?
   The :not pseudo-class is used to select and style elements that do not match a specified selector.

ul li:not(.special) {
  color: blue; /* Styles all <li> elements in a <ul> except those with the .special class */
}

10. How do you use the :empty pseudo-class in CSS?
    The :empty pseudo-class is used to select and style elements that have no children or content.

div:empty {
  display: none; /* Hides empty <div> elements */
}

11. How do you use the :checked pseudo-class in CSS?
    The :checked pseudo-class is used to select and style form elements that are checked, such as checkboxes and radio buttons.

input[type="checkbox"]:checked {
  border-color: green; /* Styles checked checkboxes with a green border */
}

12. How do you use the :enabled and :disabled pseudo-classes in CSS?
    The :enabled and :disabled pseudo-classes are used to select and style form elements that are enabled or disabled.

input:enabled {
  background-color: white; /* Styles enabled input fields with a white background */
}

input:disabled {
  background-color: lightgray; /* Styles disabled input fields with a light gray background */
}

13. How do you use the :required and :optional pseudo-classes in CSS?
    The :required and :optional pseudo-classes are used to select and style form elements that are required or optional.

input:required {
  border-color: red; /* Styles required input fields with a red border */
}

input:optional {
  border-color: gray; /* Styles optional input fields with a gray border */
}

14. How do you use the :target pseudo-class in CSS?
    The :target pseudo-class is used to select and style an element that is the target of the current URL fragment identifier.

#section1:target {
  background-color: yellow; /* Styles the element with the ID "section1" when it is the target */
}

15. How do you use the :nth-last-child pseudo-class in CSS?
    The :nth-last-child pseudo-class is used to select and style elements based on their position within a parent, counting from the last child.

ul li:nth-last-child(2) {
  color: blue; /* Styles the second-to-last <li> element in a <ul> */
}

16. How do you use the :first-of-type pseudo-class in CSS?
    The :first-of-type pseudo-class is used to select and style the first element of its type within a parent.

p:first-of-type {
  font-weight: bold; /* Styles the first <p> element within its parent */
}

17. How do you use the :last-of-type pseudo-class in CSS?
    The :last-of-type pseudo-class is used to select and style the last element of its type within a parent.

p:last-of-type {
  color: red; /* Styles the last <p> element within its parent */
}

18. How do you use the :hover and :focus pseudo-classes together?
    You can use the :hover and :focus pseudo-classes together to style an element when it is both hovered over and focused.

button:hover:focus {
  outline: 2px solid yellow; /* Styles the button with a yellow outline when it is both hovered over and focused */
}

19. How do you use the :not() pseudo-class with multiple selectors?
    You can use the :not() pseudo-class with multiple selectors to exclude multiple elements from being selected and styled.

li:not(.special, .highlight) {
  color: blue; /* Styles all <li> elements except those with the .special or .highlight class */
}

20. How do you use the :lang() pseudo-class in CSS?
    The :lang() pseudo-class is used to select and style elements based on the language specified in the HTML lang attribute.

p:lang(en) {
  font-family: "Arial", sans-serif; /* Styles <p> elements with the English language specified */
}