HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 49

April 22, 2025 John Howard

Multiple choice questions and answers (MCQs) on HTML/CSS to prepare for exams, tests, and certifications. These questions are taken from a real written exam and some parts are taken from an interview. So you will find questions on basic techniques such as tags, web standards, CSS selector, objects, and more. This quiz will easily prepare anyone to pass their online test.

1. If you want to create a section where the content can be edited in real-time by the user, which tag would be most appropriate?

A <div contenteditable="true">

B <input type="text">

C <textarea>

D <editable>

The contenteditable="true" attribute allows an HTML element (like a <div>) to become editable. The user can then directly modify the content of that section on the page, which is useful for applications that require real-time updates.

2. What is the main difference between the `<strong>` and `<b>` tags?

A None, they are two identical tags.

B <strong> indicates strong importance, while <b> just makes text bold.

C <strong> is used for links and <b> for images.

D <strong> makes text italic and <b> makes it bold.

The <strong> tag is used to indicate semantic importance or emphasis, whereas <b> is purely stylistic and simply makes text bold. This difference is significant for search engines.

3. You want to apply a style to all <section> elements that contain at least one <h3> element. Which CSS selector would you use?

A section > h3

B section h3

C section:has(h3)

D section h3 + section

The selector section:has(h3) targets all <section> elements that contain at least one <h3>. The :has() selector is very powerful but still under development in some browsers. If your project must support all browsers, JavaScript may be required to achieve this behavior.

4. Suppose you want to target all <h1> elements on a page, but only if each <h1> is preceded by a <p> element containing specific text. Which selector would you use?

A p:contains("text") + h1

B p + h1:contains("text")

C h1:preceding(p:contains("text"))

D p:contains("text") ~ h1

p:contains("text") ~ h1 targets all <h1> elements that are preceded by a <p> containing the text “text”. The ~ is a general sibling selector and selects all <h1> elements that follow a <p> with the specified text, regardless of how many elements are between them.

5. You have a list of products with <div> elements, but you want to target only the second <div> in a series of sibling elements. Which CSS selector would you use?

A div:nth-child(2)

B div:nth-of-type(2)

C div:first-child + div

D div + div:nth-child(2)

The selector div:nth-of-type(2) targets the second <div> among a series of elements of the same type, even if other types of elements appear before it. The nth-child might not work if other types of elements exist between the <div>s, whereas nth-of-type ignores those.

6. You want to apply a style to all <li> elements in a list, but only those that are in odd positions (1st, 3rd, 5th, etc.). Which CSS selector would you use?

A li:nth-child(odd)

B li:nth-of-type(odd)

C li:nth-child(2n+1)

D li:nth-child(2n)

The selector li:nth-child(2n+1) selects <li> elements in odd positions in the list. The 2n+1 formula means it selects all items where the index is an odd number, starting from the first (n=0).

7. What is the main difference between the <div> and <section> tags?

A <div> is a generic container with no semantic meaning, while <section> marks a thematic section of content with semantic meaning.

B <div> is only used for images, while <section> is for text.

C <div> is an interactive tag, while <section> is static.

D There’s no difference; both tags do exactly the same thing.

The <div> tag is used to group elements without implying any particular meaning. In contrast, the <section> tag has semantic meaning and is used to structure a document into different logical sections of content, such as a chapter or article page. This helps with accessibility and SEO.

8. You have several buttons on a page with the class .btn, and some have a disabled attribute. You want to target all disabled buttons that have the .btn class. Which CSS selector would you use?

A .btn:disabled

B .btn[disabled]

C button.btn:disabled

D button:disabled.btn

The selector .btn:disabled targets all elements with both the .btn class and the disabled attribute. This combination allows you to precisely target buttons that are disabled.

9. You want to apply a style to all <h2> elements that are immediately followed by a <p> element. Which CSS selector would you use?

A h2 + p

B h2 > p

C h2 ~ p

D h2 + p:after

The selector h2 + p selects a <p> element that immediately follows an <h2>. This is an adjacent sibling selector, meaning the <p> must be the very next sibling after the <h2> for the style to apply.

10. You want to target all <div> elements that contain only one <span> element inside. Which CSS selector would you use?

A div:has(span)

B div > span

C div > span:only-child

D div:only-child span

The selector div > span:only-child targets a <span> that is the only direct child of a <div>. This allows you to specifically target <div> elements that contain just one <span>. The :only-child ensures the <span> is the sole child of its parent.

1. If you want to create a section where the content can be edited in real-time by the user, which tag would be most appropriate?

2. What is the main difference between the <strong> and <b> tags?

3. You want to apply a style to all <section> elements that contain at least one <h3> element. Which CSS selector would you use?

4. Suppose you want to target all <h1> elements on a page, but only if each <h1> is preceded by a <p> element containing specific text. Which selector would you use?

5. You have a list of products with <div> elements, but you want to target only the second <div> in a series of sibling elements. Which CSS selector would you use?

6. You want to apply a style to all <li> elements in a list, but only those that are in odd positions (1st, 3rd, 5th, etc.). Which CSS selector would you use?

7. What is the main difference between the <div> and <section> tags?

8. You have several buttons on a page with the class .btn, and some have a disabled attribute. You want to target all disabled buttons that have the .btn class. Which CSS selector would you use?

9. You want to apply a style to all <h2> elements that are immediately followed by a <p> element. Which CSS selector would you use?

10. You want to target all <div> elements that contain only one <span> element inside. Which CSS selector would you use?

You May Also Like

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 1

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 21

HTML/CSS MCQs – Multiple Choice Questions and Answers – Part 16

Leave a Reply Cancel reply

2. What is the main difference between the `<strong>` and `<b>` tags?