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

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. Which HTML tag is used to add a date and time in a structured format?

A <date>

B <time>

C <datetime>

D <timestamp>

The <time> tag is used to define a date or time. It can also include attribute information like datetime to specify the exact date and time. This helps search engines and other applications correctly interpret the information.

2. Which tag is used to display an image as a background of an HTML element?

A <background>

B <image>

C <style>

D <div style="background-image:url('image.jpg')">

To add a background image to an HTML element, you can use the CSS property background-image directly in the style of the tag, such as with a <div>. The <div> tag is a generic container that can be styled with CSS to show a background image.

3. You have a <div> section containing both <p>, <h2>, and <span> elements. You want to target all <h2> elements, but only those that are preceded by a <p> within the same parent <div>. Which CSS selector would you use?

A div > p + h2

B div p + h2

C div h2 ~ p

D div > h2:preceding(p)

The div > p + h2 selector selects an <h2> element that immediately follows a <p> within the same parent <div>. The + selector refers to an immediate sibling, which means <h2> must be directly after the <p>. The selection is not affected by other elements in between.

4. You want to apply a style only to <div> elements that are hidden, using the attribute `aria-hidden="true"`. Which CSS selector would you use?

A div[aria-hidden="true"]

B div[hidden]

C div:aria-hidden(true)

D div:not([aria-hidden="false"])

The selector div[aria-hidden="true"] targets <div> elements with the attribute aria-hidden set to “true”. This allows you to target elements explicitly marked as hidden using aria-hidden, which is good accessibility practice.

5. You want to target only visible elements within a container, excluding elements with `display: none` or `visibility: hidden`. What is the most appropriate CSS selector?

A div:visible

B div:not([hidden])

C div:visible:not([display="none"])

D There is no CSS selector for this

There is no pure CSS selector to directly target visible elements. CSS selectors can’t dynamically check whether an element is visible on the page or not. For this, JavaScript is needed to detect element visibility.

6. You want to target all <a> links on your page, but only those that have been clicked and are currently active. Which selector would you use?

A a:focus:active

B a:visited:active

C a:active

D a:visited:focus

The selector a:visited:active targets links that have been clicked (visited state) and are currently in the active state (when the user clicks on them). This selector is useful to apply specific styles to links that are already visited when they are being clicked.

7. You want to target all <li> elements in a list, but only those in even positions and that contain a <span> child. Which CSS selector would you use?

A li:nth-child(even) > span

B li:nth-child(even):has(span)

C li:even > span

D li:nth-child(2n):has(span)

The selector li:nth-child(even):has(span) targets <li> elements that are in even positions (2nd, 4th, etc.) and contain a <span> child. The :has() selector allows checking if an element contains a specific child, although it’s still experimental in some browsers.

8. Imagine a page structure with several <section> elements, and you want to apply a style to all <p> elements inside a section with the class `.highlighted`. Which selector would you use?

A .highlighted p

B section p.highlighted

C .highlighted > p

D .highlighted :p

The selector .highlighted p targets all <p> elements inside a section with the class .highlighted. This ensures only the paragraphs within that specific section are styled, regardless of their position in the hierarchy.

9. You want to apply a style only to <h2> elements that are preceded by two <p> elements, in a page structure where each <h2> may be preceded by different types of elements. Which selector would you use?

A p + p + h2

B p ~ p + h2

C p > p + h2

D h2:preceding(p + p)

The selector p + p + h2 selects an <h2> element that is preceded by two <p> elements. The + selector selects the immediate next element, so p + p + h2 ensures that the second <p> is just before the <h2>. This allows targeting this specific relationship.

10. You want to apply a style to a <p> element only if its parent is a <div> with the class “container”. Which CSS selector would you use?

A div.container > p

B div > .container p

C .container p

D div p.container

The selector div.container > p targets all <p> elements that are direct children of a <div> with the class .container. This ensures the style is applied only to <p> elements directly under that specific parent.

1. Which HTML tag is used to add a date and time in a structured format?

2. Which tag is used to display an image as a background of an HTML element?

3. You have a <div> section containing both <p>, <h2>, and <span> elements. You want to target all <h2> elements, but only those that are preceded by a <p> within the same parent <div>. Which CSS selector would you use?

4. You want to apply a style only to <div> elements that are hidden, using the attribute aria-hidden="true". Which CSS selector would you use?

5. You want to target only visible elements within a container, excluding elements with display: none or visibility: hidden. What is the most appropriate CSS selector?

6. You want to target all <a> links on your page, but only those that have been clicked and are currently active. Which selector would you use?

7. You want to target all <li> elements in a list, but only those in even positions and that contain a <span> child. Which CSS selector would you use?

8. Imagine a page structure with several <section> elements, and you want to apply a style to all <p> elements inside a section with the class .highlighted. Which selector would you use?

9. You want to apply a style only to <h2> elements that are preceded by two <p> elements, in a page structure where each <h2> may be preceded by different types of elements. Which selector would you use?

10. You want to apply a style to a <p> element only if its parent is a <div> with the class “container”. Which CSS selector would you use?

You May Also Like

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

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

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

Leave a Reply Cancel reply

4. You want to apply a style only to <div> elements that are hidden, using the attribute `aria-hidden="true"`. Which CSS selector would you use?

5. You want to target only visible elements within a container, excluding elements with `display: none` or `visibility: hidden`. What is the most appropriate CSS selector?

8. Imagine a page structure with several <section> elements, and you want to apply a style to all <p> elements inside a section with the class `.highlighted`. Which selector would you use?