MCQs Of Class 22: Pseudo-classes
1. What does the :hover pseudo-class do?
a) Applies a style when an element is focused
b) Applies a style when an element is hovered over by the mouse
c) Changes the color of a link
d) Applies a style when an element is clicked
Answer: b) Applies a style when an element is hovered over by the mouse
Explanation: The :hover pseudo-class is triggered when the mouse cursor hovers over an element.
2. Which CSS property is commonly used with the :hover pseudo-class for interactive effects?
a) font-size
b) background-color
c) display
d) visibility
Answer: b) background-color
Explanation: The background-color property is commonly used in combination with the :hover pseudo-class to create hover effects on elements, such as buttons or links.
3. What is the result of applying the :focus pseudo-class to an input element?
a) The input element’s background color changes when the mouse hovers over it
b) The input element’s text color changes
c) The input element gains focus and is visually styled
d) The input element’s border color disappears
Answer: c) The input element gains focus and is visually styled
Explanation: The :focus pseudo-class applies a style to an element when it gains focus, such as when a user clicks on an input field.
4. How can you change the border color of an input field when it is focused?
a) Use the :focus pseudo-class and border-color property
b) Use the :hover pseudo-class and border-color property
c) Use the :active pseudo-class
d) Use the :visited pseudo-class
Answer: a) Use the :focus pseudo-class and border-color property
Explanation: The :focus pseudo-class is used to change the border color when an input field receives focus.
5. Which of the following is true about the :nth-child() pseudo-class?
a) It applies styles based on an element’s type
b) It selects elements based on their position within a parent element
c) It only works on div elements
d) It applies a style when an element is focused
Answer: b) It selects elements based on their position within a parent element
Explanation: The :nth-child() pseudo-class allows you to select elements based on their position within a parent container, such as every nth element.
6. How would you target the second item in a list using the :nth-child() pseudo-class?
a) li:nth-child(2)
b) li:nth-child(odd)
c) li:nth-of-type(2)
d) li:nth-child(2n)
Answer: a) li:nth-child(2)
Explanation: The :nth-child(2) pseudo-class selects the second item in a list.
7. What does :nth-child(odd) do?
a) It selects all even-numbered elements
b) It selects all odd-numbered elements
c) It selects every third element
d) It selects every second element
Answer: b) It selects all odd-numbered elements
Explanation: The :nth-child(odd) pseudo-class applies styles to all odd-numbered children (1st, 3rd, 5th, etc.) of a parent element.
8. How can you apply a background color to every third row in a table using CSS?
a) tr:nth-child(3)
b) tr:nth-child(3n)
c) tr:nth-child(odd)
d) tr:nth-child(even)
Answer: b) tr:nth-child(3n)
Explanation: The :nth-child(3n) pseudo-class applies a style to every third row in a table.
9. Which pseudo-class is used to change the color of a link when it is hovered over?
a) :focus
b) :active
c) :visited
d) :hover
Answer: d) :hover
Explanation: The :hover pseudo-class is used to change the appearance of a link when it is hovered over.
10. Which of the following pseudo-classes can be used to style a link when it has been clicked?
a) :visited
b) :focus
c) :active
d) :hover
Answer: c) :active
Explanation: The :active pseudo-class applies styles to an element when it is being clicked.
11. Which CSS pseudo-class targets the last child element of a parent container?
a) :last-child
b) :nth-last-child(1)
c) :first-child
d) :last-of-type
Answer: a) :last-child
Explanation: The :last-child pseudo-class selects the last child element of a parent container.
12. What happens when you apply the :hover pseudo-class to an anchor tag (<a>) in CSS?
a) The link text changes color when the link is clicked
b) The link text changes color when the mouse hovers over the link
c) The background color of the link changes
d) The link is removed
Answer: b) The link text changes color when the mouse hovers over the link
Explanation: The :hover pseudo-class changes the style of an anchor tag when the user hovers over it with the mouse.
13. How can you apply different styles to every other item in an unordered list?
a) li:nth-child(odd)
b) li:nth-child(2n)
c) li:nth-child(2)
d) li:nth-child(even)
Answer: d) li:nth-child(even)
Explanation: The :nth-child(even) pseudo-class applies styles to even-numbered items in a list.
14. Which of the following pseudo-classes applies styles when an element is actively being clicked?
a) :hover
b) :focus
c) :active
d) :visited
Answer: c) :active
Explanation: The :active pseudo-class applies styles to an element when it is being clicked or activated.
15. Which of the following CSS rules will apply a background color to every 4th list item?
a) li:nth-child(4)
b) li:nth-child(4n)
c) li:nth-child(odd)
d) li:nth-child(even)
Answer: b) li:nth-child(4n)
Explanation: The :nth-child(4n) pseudo-class applies a style to every fourth item in a list.
16. What will happen if you apply the :hover pseudo-class to a button element?
a) The button color remains the same
b) The button will move to a different location
c) The button background color will change when hovered
d) The button text will disappear
Answer: c) The button background color will change when hovered
Explanation: The :hover pseudo-class changes the style of an element, such as the background color, when the mouse hovers over it.
17. What is the purpose of the transition property when used with :hover?
a) It makes the hover effect immediate
b) It animates the change in style over a specified duration
c) It prevents the hover effect
d) It adds a hover effect to the element
Answer: b) It animates the change in style over a specified duration
Explanation: The transition property allows for smooth animation of changes when the element's style changes, such as during a hover.
18. How can you change the color of a textarea element when it is focused?
a) Use textarea:hover
b) Use textarea:active
c) Use textarea:focus
d) Use textarea:focus-within
Answer: c) Use textarea:focus
Explanation: The textarea:focus pseudo-class applies a style to the textarea when it is focused.
19. Which of the following CSS pseudo-classes is used to target an element when it has received focus?
a) :hover
b) :active
c) :focus
d) :visited
Answer: c) :focus
Explanation: The :focus pseudo-class applies styles to an element when it is focused, such as an input field or button.
20. How would you style the first child element of a container using CSS?
a) container:first-child
b) container:first-of-type
c) :first-child
d) :nth-child(1)
Answer: c) :first-child
Explanation: The :first-child pseudo-class targets the first child of a parent element.
Note: If you'd like more MCQs or specific explanations for any of the questions, let me know!
4o mini
You said:
yes
ChatGPT said:
ChatGPT
Here are the remaining MCQs with detailed explanations:
21. What does the :nth-child(2n) pseudo-class do?
a) Selects every second child
b) Selects every third child
c) Selects the first child
d) Selects the last child
Answer: a) Selects every second child
Explanation: The :nth-child(2n) pseudo-class selects every second child of a parent element (i.e., 2nd, 4th, 6th, etc.).
22. Which pseudo-class is used to style a link that has already been visited by the user?
a) :focus
b) :active
c) :hover
d) :visited
Answer: d) :visited
Explanation: The :visited pseudo-class targets links that have already been visited by the user.
23. How can you apply a red border to an input element when it is focused?
a) input:focus { border: 1px solid red; }
b) input:hover { border: 1px solid red; }
c) input:focus { border-color: red; }
d) Both a and c
Answer: d) Both a and c
Explanation: Both input:focus { border: 1px solid red; } and input:focus { border-color: red; } are valid to change the border color to red when the input field gains focus.
24. What does the :focus-within pseudo-class do?
a) Selects elements that are focused
b) Selects elements within a focused parent element
c) Selects the last focused element
d) Selects all child elements of a focused element
Answer: b) Selects elements within a focused parent element
Explanation: The :focus-within pseudo-class applies styles to a parent element if any of its child elements have received focus.
25. Which pseudo-class targets elements that are being clicked on or activated?
a) :hover
b) :active
c) :focus
d) :visited
Answer: b) :active
Explanation: The :active pseudo-class is used to target an element while it is being clicked or activated.
26. Which of the following can be selected using the :nth-child() pseudo-class?
a) Every child element of a parent
b) Every even or odd child
c) Every third child
d) All of the above
Answer: d) All of the above
Explanation: The :nth-child() pseudo-class can be used to select every child element, every even or odd child, or every nth child depending on the value passed (e.g., 2n, odd, even).
27. Which pseudo-class is used to apply a style when an element is being clicked or activated?
a) :focus
b) :active
c) :hover
d) :visited
Answer: b) :active
Explanation: The :active pseudo-class applies styles to an element during the activation state, such as when it is clicked.
28. Which of the following is true about the :nth-child(odd) pseudo-class?
a) It selects all even-numbered children
b) It selects all odd-numbered children
c) It selects every third child
d) It selects the first child only
Answer: b) It selects all odd-numbered children
Explanation: The :nth-child(odd) pseudo-class selects all odd-numbered children (1st, 3rd, 5th, etc.) of a parent element.
29. What happens when the :focus pseudo-class is applied to a text input field?
a) It makes the input field's text bold
b) It highlights the input field
c) It hides the input field
d) It changes the input field’s border color
Answer: b) It highlights the input field
Explanation: The :focus pseudo-class highlights the input field when it is selected or focused.
30. How can you apply a style to a link when it is hovered over by the mouse?
a) a:focus
b) a:hover
c) a:visited
d) a:active
Answer: b) a:hover
Explanation: The :hover pseudo-class is used to apply styles when a user hovers over a link with the mouse.
31. Which pseudo-class would you use to change the color of the link when a user clicks on it?
a) :hover
b) :visited
c) :focus
d) :active
Answer: d) :active
Explanation: The :active pseudo-class applies styles to an element when it is clicked (activated).
32. Which of the following is true about the :nth-last-child() pseudo-class?
a) It selects the first child from the end
b) It selects the last child from the beginning
c) It selects the nth child from the end
d) It selects the last element of any type
Answer: c) It selects the nth child from the end
Explanation: The :nth-last-child() pseudo-class allows you to select elements based on their position counting from the last child, such as the 1st from the end.
33. What effect does applying the :nth-child(2n+1) pseudo-class have on a list?
a) It selects every even-numbered child
b) It selects every odd-numbered child
c) It selects every third child
d) It selects the first child only
Answer: b) It selects every odd-numbered child
Explanation: The :nth-child(2n+1) pseudo-class selects every odd-numbered child, such as the 1st, 3rd, 5th, etc.
34. Which pseudo-class would you use to style the first child element of a parent element?
a) :first-of-type
b) :nth-child(1)
c) :first-child
d) :nth-child(odd)
Answer: c) :first-child
Explanation: The :first-child pseudo-class targets the first child of a parent element.
35. How would you style all the even-numbered children in a list using :nth-child()?
a) li:nth-child(even)
b) li:nth-child(odd)
c) li:nth-child(2n)
d) Both a and c
Answer: d) Both a and c
Explanation: Both li:nth-child(even) and li:nth-child(2n) select all even-numbered children in a list.
36. How do you apply a background color to a link when the user hovers over it?
a) a:focus { background-color: red; }
b) a:active { background-color: red; }
c) a:hover { background-color: red; }
d) a:visited { background-color: red; }
Answer: c) a:hover { background-color: red; }
Explanation: The :hover pseudo-class is used to change the style, such as background color, when the user hovers over a link.
37. What is the difference between :nth-child() and :nth-of-type()?
a) :nth-child() targets elements based on their type, while :nth-of-type() targets any element
b) :nth-child() is used for child selection, while :nth-of-type() targets a specific element type
c) :nth-child() works only for div elements
d) There is no difference
Answer: b) :nth-child() is used for child selection, while :nth-of-type() targets a specific element type
Explanation: The :nth-child() pseudo-class selects children of a parent element based on their position, while :nth-of-type() targets specific elements of the same type.
38. How can you apply a different font color to every odd-numbered paragraph in a document?
a) p:nth-child(odd) { color: red; }
b) p:nth-of-type(odd) { color: red; }
c) p:nth-child(2n+1) { color: red; }
d) All of the above
Answer: d) All of the above
Explanation: All of the above methods will target odd-numbered paragraphs and apply a red font color.
39. Which pseudo-class is used to select all anchor tags that have not been clicked by the user?
a) :visited
b) :active
c) :hover
d) :link
Answer: d) :link
Explanation: The :link pseudo-class targets anchor links that have not been clicked or visited by the user.
40. What will happen if you apply li:nth-child(2n) to a list of 6 items?
a) Every second list item will be selected
b) Only the last item will be selected
c) Every odd-numbered item will be selected
d) No items will be selected
Answer: a) Every second list item will be selected
Explanation: The li:nth-child(2n) pseudo-class will select every second list item (2nd, 4th, 6th).
I hope these MCQs are helpful! Would you like me to continue with more questions?
4o mini
You said:
rest 10
ChatGPT said:
ChatGPT
Here are the final 10 MCQs with explanations:
41. What does the :first-of-type pseudo-class do?
a) Selects the first child element
b) Selects the first occurrence of an element of a specific type
c) Selects the first child, regardless of type
d) Selects the first element with a specific class
Answer: b) Selects the first occurrence of an element of a specific type
Explanation: The :first-of-type pseudo-class selects the first element of a specified type (e.g., the first p, div, or span tag) within its parent.
42. Which pseudo-class is used to style an element when the user presses a key while the element is focused?
a) :active
b) :focus
c) :focus-visible
d) :hover
Answer: b) :focus
Explanation: The :focus pseudo-class applies styles to an element when it has received focus, which typically happens when a user clicks on an input field or navigates to it using the keyboard.
43. How do you apply a style to every child of a parent element except the last one?
a) parent :nth-child(odd)
b) parent :nth-last-child(1)
c) parent :not(:last-child)
d) parent :nth-child(even)
Answer: c) parent :not(:last-child)
Explanation: The :not(:last-child) pseudo-class allows you to apply styles to all child elements except the last one.
44. What is the use of the :focus-visible pseudo-class?
a) It applies styles when an element gains focus
b) It applies styles only when the element is focused using the keyboard
c) It applies styles to all focusable elements
d) It applies styles to elements that are hovered over
Answer: b) It applies styles only when the element is focused using the keyboard
Explanation: The :focus-visible pseudo-class targets elements that are focused using the keyboard or other means that would typically show visual focus indicators, ensuring better accessibility.
45. Which pseudo-class can be used to target all visited links in a document?
a) :hover
b) :link
c) :visited
d) :active
Answer: c) :visited
Explanation: The :visited pseudo-class is used to style links that have already been visited by the user.
46. Which pseudo-class is used to style a list element that is hovered over by the user?
a) li:active
b) li:focus
c) li:hover
d) li:visited
Answer: c) li:hover
Explanation: The :hover pseudo-class is used to apply styles when an element (in this case, a list item) is hovered over by the mouse.
47. How do you apply a green background color to a text input when the input is focused?
a) input:focus { background-color: green; }
b) input:hover { background-color: green; }
c) input:active { background-color: green; }
d) input:visited { background-color: green; }
Answer: a) input:focus { background-color: green; }
Explanation: The :focus pseudo-class is used to style input fields when they are focused (i.e., clicked or selected), so input:focus { background-color: green; } changes the background color to green when the input is focused.
48. Which of the following will apply styles to every second child of a parent element?
a) element:nth-child(2n)
b) element:nth-child(odd)
c) element:nth-child(2)
d) element:nth-last-child(2n)
Answer: a) element:nth-child(2n)
Explanation: The nth-child(2n) pseudo-class selects every second child element, starting from the second one (2nd, 4th, 6th, etc.).
49. What does the :not(:first-child) pseudo-class do?
a) Selects the first child
b) Selects all child elements except the first one
c) Selects the first element of any type
d) Selects the last element
Answer: b) Selects all child elements except the first one
Explanation: The :not(:first-child) pseudo-class excludes the first child and applies styles to all the other child elements within a parent.
50. How can you select all form input elements that are currently focused?
a) input:focus { border: 2px solid red; }
b) form:focus input { border: 2px solid red; }
c) input:hover { border: 2px solid red; }
d) form input:focus { border: 2px solid red; }
Answer: a) input:focus { border: 2px solid red; }
Explanation: The input:focus pseudo-class applies styles to any input element when it gains focus. In this case, it changes the border to 2px solid red.
No comments:
Post a Comment