MCQs Of Class 2: Basic Selectors
1. Which CSS selector targets all <p> elements in a document?
o a) .p
o b) #p
o c) p
o d) *p
Answer: c) p
Explanation: The p selector targets all <p> elements in the document.
2. Which selector is used to select an element with a specific ID?
o a) .element
o b) #element
o c) *element
o d) element
Answer: b) #element
Explanation: The # symbol is used to target an element by its ID.
3. Which CSS selector targets an element with a class highlight?
o a) .highlight
o b) #highlight
o c) *highlight
o d) highlight
Answer: a) .highlight
Explanation: The . (dot) is used to target elements with a specific class.
4. How can you apply styles to all <div> elements that have the class container?
o a) .container div
o b) div.container
o c) div .container
o d) #container div
Answer: b) div.container
Explanation: The div.container selector targets all <div> elements that have the container class.
5. Which selector would you use to target a button with the ID submitBtn?
o a) #submitBtn
o b) .submitBtn
o c) button#submitBtn
o d) button.submitBtn
Answer: a) #submitBtn
Explanation: The #submitBtn selector targets the element with the ID submitBtn.
6. What does the selector p, h1, h2 do?
o a) Targets all <p>, <h1>, and <h2> elements
o b) Targets only <p> elements
o c) Targets only <h1> elements
o d) Targets all <p>, <h1>, and <h2> elements with class p
Answer: a) Targets all <p>, <h1>, and <h2> elements
Explanation: The , (comma) is used to select multiple elements.
7. How do you select all elements in an HTML document?
o a) *
o b) all
o c) #
o d) body
Answer: a) *
Explanation: The * selector targets all elements in the document.
8. Which selector would select all <a> elements that are inside a <nav> element?
o a) a nav
o b) nav a
o c) nav > a
o d) nav a:hover
Answer: b) nav a
Explanation: The nav a selector targets all <a> elements inside <nav>.
9. Which of the following selectors targets all <h2> elements inside elements with the class section?
o a) .section h2
o b) h2.section
o c) #section h2
o d) h2 .section
Answer: a) .section h2
Explanation: The .section h2 selector targets all <h2> elements inside elements with the section class.
10. What is the correct syntax to select a class named header?
- a) #header
- b) .header
- c) header
- d) *header
Answer: b) .header
Explanation: The . is used to select an element by its class name.
11. Which CSS selector is used to select an element by its ID?
- a) .class
- b) #id
- c) element
- d) id
Answer: b) #id
Explanation: The # symbol is used to target an element by its ID.
12. Which selector applies styles to only the first <p> element in a document?
- a) p:first
- b) p:first-child
- c) p:nth-child(1)
- d) first-child
Answer: b) p:first-child
Explanation: The :first-child pseudo-class selects the first child element of its parent.
13. Which of the following CSS selectors targets the last <li> in an unordered list?
- a) ul:last-child
- b) li:last-child
- c) ul li:last-child
- d) li:last-of-type
Answer: b) li:last-child
Explanation: The :last-child pseudo-class selects the last child element of its parent.
14. Which selector applies styles to all <div> elements that have a specific class container and an ID main?
- a) .container#main
- b) #main.container
- c) div.container#main
- d) #main div.container
Answer: a) .container#main
Explanation: This selector combines both class and ID selectors to target a <div> element with both container class and main ID.
15. Which CSS selector is used to select all <input> elements of type text?
- a) input[type="text"]
- b) .input[type="text"]
- c) input[type="text"]{}
- d) input:text
Answer: a) input[type="text"]
Explanation: The input[type="text"] selector targets all <input> elements with type text.
16. Which of the following is correct to apply styles to all <p> elements with the class info?
- a) .p.info
- b) p.info
- c) p:info
- d) .info p
Answer: b) p.info
Explanation: The p.info selector applies styles to all <p> elements with the info class.
17. How can you target all <h1> elements inside a div?
- a) div h1
- b) div > h1
- c) div h1:first-child
- d) h1 div
Answer: a) div h1
Explanation: The div h1 selector targets all <h1> elements inside a div.
18. What does the * selector do in CSS?
- a) Selects all elements
- b) Selects all IDs
- c) Selects all classes
- d) Selects all input elements
Answer: a) Selects all elements
Explanation: The * selector is a universal selector that targets every element in the document.
19. Which of the following selectors targets all <a> elements with the class active?
- a) a.active
- b) .active a
- c) a .active
- d) #active a
Answer: a) a.active
Explanation: The a.active selector targets all <a> elements with the class active.
20. What does the :hover pseudo-class apply to?
- a) When the mouse pointer is over an element
- b) When an element is focused
- c) When an element is active
- d) When an element is clicked
Answer: a) When the mouse pointer is over an element
Explanation: The :hover pseudo-class applies styles when the mouse pointer hovers over an element.
21. Which selector is used to select all <p> elements that are the first child of their parent?
- a) p:first-child
- b) p:first
- c) p:first-of-type
- d) first-child p
Answer: a) p:first-child
Explanation: The :first-child pseudo-class targets the first child of its parent, in this case, <p> elements.
22. What is the correct syntax to select all elements with the class nav-item?
- a) #nav-item
- b) .nav-item
- c) nav-item
- d) *nav-item
Answer: b) .nav-item
Explanation: The . selector is used to select elements by their class name.
23. Which selector is used to select an element by its attribute value?
- a) *
- b) [attribute="value"]
- c) .attribute
- d) #attribute
Answer: b) [attribute="value"]
Explanation: The [attribute="value"] selector targets elements with a specific attribute value.
24. How do you select an element that has a specific class and an ID at the same time?
- a) .class#id
- b) #class#id
- c) #id.class
- d) .class#id
Answer: d) .class#id
Explanation: The .class#id selector targets elements that have both the class class and the ID id.
25. Which selector would target the second <p> element in a document?
- a) p:nth-child(2)
- b) p:nth-of-type(2)
- c) p:second-child
- d) p:2
Answer: b) p:nth-of-type(2)
Explanation: The p:nth-of-type(2) selector targets the second <p> element of its type.
26. Which selector targets all elements that are the last child of their parent?
- a) last-child
- b) *:last-child
- c) :last-child
- d) :last
Answer: c) :last-child
Explanation: The :last-child pseudo-class targets the last child element of a parent.
27. What does the selector div > p target?
- a) All <p> elements inside a <div>
- b) All direct child <p> elements of a <div>
- c) All <div> elements that are children of <p>
- d) All <p> elements in a document
Answer: b) All direct child <p> elements of a <div>
Explanation: The > combinator targets direct child elements.
28. What is the correct syntax to apply styles to an element with the id of footer?
- a) footer#id
- b) #footer
- c) .footer
- d) footer
Answer: b) #footer
Explanation: The # is used to target an element by its id.
29. How do you apply a style to all p elements that are not the first child of their parent?
- a) p:not(:first-child)
- b) p:first-child
- c) p:nth-child(1)
- d) p:last-child
Answer: a) p:not(:first-child)
Explanation: The :not(:first-child) pseudo-class excludes the first child.
30. What does the a:hover selector do?
- a) It applies styles to a link when it is clicked
- b) It applies styles to a link when the mouse pointer is over it
- c) It applies styles to a link when it is active
- d) It applies styles to a link when it is visited
Answer: b) It applies styles to a link when the mouse pointer is over it
Explanation: The :hover pseudo-class applies styles when the mouse pointer is over the link.
31. Which of the following applies a style to a button when the user is actively clicking on it?
- a) button:focus
- b) button:hover
- c) button:active
- d) button:click
Answer: c) button:active
Explanation: The :active pseudo-class applies styles when the element is being clicked.
32. What does the selector p ~ ul target?
- a) A <ul> element immediately following a <p> element
- b) Any <ul> element that is a sibling of a <p> element
- c) A <ul> element inside a <p> element
- d) Any <ul> element within a <p> element
Answer: b) Any <ul> element that is a sibling of a <p> element
Explanation: The ~ combinator selects all sibling elements of a specific type.
33. Which selector applies styles to the second child of any parent element?
- a) p:nth-child(2)
- b) p:nth-of-type(2)
- c) p:first-child
- d) p:second-child
Answer: a) p:nth-child(2)
Explanation: The nth-child(2) pseudo-class selects the second child element.
34. Which selector is used to apply styles to all elements that have a data-* attribute?
- a) [data]
- b) [data-*]
- c) [data-*="value"]
- d) [data]
4o mini
You said:
more 16
ChatGPT said:
ChatGPT
Here are 16 more multiple-choice questions on CSS selectors:
35. Which selector is used to select all elements with a class of "active" and an ID of "menu"?
- a) .active#menu
- b) #active.menu
- c) .active.menu
- d) .active#menu
Answer: d) .active#menu
Explanation: The .active#menu selector targets elements that have both the class active and the ID menu.
36. Which selector targets all <div> elements that are the first child of their parent?
- a) div:first-child
- b) div:first-of-type
- c) div:nth-child(1)
- d) div:first
Answer: a) div:first-child
Explanation: The div:first-child selector targets <div> elements that are the first child of their parent.
37. What is the purpose of the * universal selector in CSS?
- a) It targets all elements in the document
- b) It targets only div elements
- c) It targets only the elements with classes
- d) It targets all elements of a specific type
Answer: a) It targets all elements in the document
Explanation: The * selector selects every element in the document.
38. Which selector selects all links that have been visited?
- a) a:active
- b) a:focus
- c) a:visited
- d) a:hover
Answer: c) a:visited
Explanation: The a:visited pseudo-class targets links that have already been visited.
39. How would you select all <div> elements inside an element with the class .container?
- a) .container div
- b) div .container
- c) .container > div
- d) div.container
Answer: a) .container div
Explanation: The .container div selector targets all <div> elements inside any element with the class container.
40. Which selector is used to target a specific <input> element by its type attribute?
- a) input[type="text"]
- b) input:select
- c) input:text
- d) input[type=“text”]
Answer: a) input[type="text"]
Explanation: The input[type="text"] selector targets <input> elements of type text.
41. How would you select every <a> element inside a <div> element with the class .navigation?
- a) .navigation > a
- b) .navigation a
- c) div .navigation a
- d) a .navigation
Answer: b) .navigation a
Explanation: The .navigation a selector selects all <a> elements inside a .navigation class.
42. What does the p:first-of-type selector do?
- a) Selects the first <p> element in the document
- b) Selects the first <p> element of its parent
- c) Selects all <p> elements
- d) Selects the first child element of type <p>
Answer: b) Selects the first <p> element of its parent
Explanation: The p:first-of-type selector targets the first <p> element in its parent container.
43. Which of the following selectors would target every odd-numbered list item in a <ul>?
- a) li:nth-child(odd)
- b) ul:nth-child(odd)
- c) li:nth-of-type(odd)
- d) ul:nth-child(odd)
Answer: a) li:nth-child(odd)
Explanation: The li:nth-child(odd) selector targets odd-numbered list items inside a <ul>.
44. Which selector targets all elements with a class of highlight or highlighted?
- a) .highlight, .highlighted
- b) .highlight & .highlighted
- c) .highlight | .highlighted
- d) .highlight:highlighted
Answer: a) .highlight, .highlighted
Explanation: The .highlight, .highlighted selector targets elements with either the highlight or highlighted class.
45. What does the ::after pseudo-element do?
- a) It inserts content after an element
- b) It selects elements that come after a specific one
- c) It targets the last child element
- d) It applies a style to the last element
Answer: a) It inserts content after an element
Explanation: The ::after pseudo-element is used to insert content immediately after an element.
46. Which of the following selectors is used to select an element by its id?
- a) .id
- b) #id
- c) id
- d) id#
Answer: b) #id
Explanation: The # symbol is used to select an element by its id.
47. How would you select the first <p> element inside a <div> element?
- a) div:first-child p
- b) div p:first-of-type
- c) div p:first-child
- d) div:first-of-type p
Answer: b) div p:first-of-type
Explanation: The div p:first-of-type selector targets the first <p> element inside a <div>.
48. Which selector is used to select all input elements that are disabled?
- a) input[disabled]
- b) input:disabled
- c) input:enabled
- d) input[disabled=true]
Answer: b) input:disabled
Explanation: The input:disabled selector targets all input elements that are disabled.
49. What does the ::before pseudo-element do?
- a) It inserts content before an element
- b) It applies styles to the element before a specific point
- c) It applies styles to the element after a specific point
- d) It targets the first child element
Answer: a) It inserts content before an element
Explanation: The ::before pseudo-element inserts content before an element.
50. How would you select an element with both a class of active and an ID of header?
- a) active#header
- b) .active#header
- c) .active header
- d) .header.active
Answer: b) .active#header
Explanation: The .active#header selector targets elements that have both the class active and the ID header.
No comments:
Post a Comment