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

April 23, 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. You want to apply a style to <input> elements that have a `data-index` attribute with a numeric value less than 5. Which CSS selector would you use?

A input[data-index<5]

B input[data-index="5"]

C input[data-index]

D input[data-index=""]

In pure CSS, it's not possible to make numeric comparisons on attribute values (like data-index<5). The selector input[data-index] applies a style to all <input> elements with a data-index attribute, regardless of its value. For numeric comparison, JavaScript would be needed.

2. You want to target all <section> elements that have exactly 3 child elements. Which CSS selector would you use?

A section:nth-child(3)

B section:has(> *:nth-child(3))

C section:only-child

D section:nth-of-type(3)

The selector section:has(> *:nth-child(3)) is a compound selector that targets a <section> with exactly 3 direct children. The :has() checks if an element contains a specific child. However, this feature is still experimental in some browsers and may not work everywhere.

3. You want to apply a style to all <div> elements that contain at least one <p> element with the class `.highlighted`. Which CSS selector would you use?

A div > p.highlighted

B div + p.highlighted

C div > .highlighted

D div:has(p.highlighted)

The selector div:has(p.highlighted) targets all <div> elements that contain a <p> child with the class .highlighted. The :has() pseudo-class allows selecting a parent based on its child content, but it is not yet universally supported in all browsers.

4. You want to apply a style only to <input> elements that are of type "checkbox" and are checked. Which CSS selector would you use?

A input[type="checkbox"]:checked

B input[type="checkbox"]:focus

C input:checked[type="checkbox"]

D input:checked:not([type="checkbox"])

The selector input[type="checkbox"]:checked targets only <input> elements of type checkbox that are currently checked. This selector is extremely useful for targeting checkboxes in a form.

5. You want to apply a style to all <p> elements that immediately follow an <h2> element in a container, but only if that <h2> element contains specific text. Which CSS selector would you use?

A h2 + p:contains("text")

B h2:has(+ p):contains("text")

C h2 + p:has(:contains("text"))

D h2 + p

The selector h2 + p:contains("text") targets a <p> element that immediately follows an <h2> and contains the text "text". However, it's worth noting that the :contains() selector is not native in pure CSS; it is often used with libraries like jQuery. In native CSS, it's not possible to select an element based on its text, so this would need to be handled with JavaScript.

6. You want to apply a style to all <input> elements of type radio that have the `disabled` attribute. Which CSS selector would you use?

A input[type="radio"]:disabled

B input[disabled][type="radio"]

C input[type="radio"]:checked:disabled

D input[disabled]:radio

The selector input[type="radio"]:disabled targets all <input> elements of type radio that have the disabled attribute. This selector is very useful for disabling interaction with certain radio options in a form.

7. You want to apply a style to all <p> elements that are not preceded by an <h1> element. Which CSS selector would you use?

A p:not(h1 ~ p)

B p:not(:has(h1))

C p:not(:preceded-by(h1))

D p:not(h1 + p)

The selector p:not(h1 + p) applies a style to all <p> elements that are not immediately preceded by an <h1> element. The + is an adjacent sibling selector, which means this rule excludes <p> elements that directly follow an <h1>.

8. You want to apply a style to all <div> elements that have a <p> child in the fourth position among their children. Which CSS selector would you use?

A div p:nth-child(4)

B div:nth-child(4) p

C div > p:nth-child(4)

D div p:nth-of-type(4)

The selector div > p:nth-child(4) targets the fourth child <p> that is a direct child of a <div> element. The nth-child(4) is used to specify a particular position among the children.

9. You want to apply a style to all visited <a> links, but only if their text color is red. Which CSS selector would you use?

A a:visited { color: red; }

B a:visited:color(red)

C a:visited { color: red; }

D a:visited:not(:color(red))

The selector a:visited targets links that have been visited by the user, and color: red; ensures the text of these links is red.

10. You want to apply a style to all <div> elements that contain a <p> element that is currently being hovered. Which CSS selector would you use?

A div:hover p

B div:has(p:hover)

C div > p:hover

D div p:focus

The selector div:has(p:hover) targets a <div> that contains a child <p> element being hovered. The :has() is a parent pseudo-class that allows selecting a parent based on its child content, but this feature is still under development in some browsers.

1. You want to apply a style to <input> elements that have a data-index attribute with a numeric value less than 5. Which CSS selector would you use?

2. You want to target all <section> elements that have exactly 3 child elements. Which CSS selector would you use?

3. You want to apply a style to all <div> elements that contain at least one <p> element with the class .highlighted. Which CSS selector would you use?

4. You want to apply a style only to <input> elements that are of type "checkbox" and are checked. Which CSS selector would you use?

5. You want to apply a style to all <p> elements that immediately follow an <h2> element in a container, but only if that <h2> element contains specific text. Which CSS selector would you use?

6. You want to apply a style to all <input> elements of type radio that have the disabled attribute. Which CSS selector would you use?

7. You want to apply a style to all <p> elements that are not preceded by an <h1> element. Which CSS selector would you use?

8. You want to apply a style to all <div> elements that have a <p> child in the fourth position among their children. Which CSS selector would you use?

9. You want to apply a style to all visited <a> links, but only if their text color is red. Which CSS selector would you use?

10. You want to apply a style to all <div> elements that contain a <p> element that is currently being hovered. Which CSS selector would you use?

You May Also Like

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

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

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

Leave a Reply Cancel reply

1. You want to apply a style to <input> elements that have a `data-index` attribute with a numeric value less than 5. Which CSS selector would you use?

3. You want to apply a style to all <div> elements that contain at least one <p> element with the class `.highlighted`. Which CSS selector would you use?

6. You want to apply a style to all <input> elements of type radio that have the `disabled` attribute. Which CSS selector would you use?