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

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. You want to target all <p> elements that are descendants of an element with the class `.container`. Which CSS selector would you use?

A .container > p

B .container p

C .container :p

D p .container

The selector .container p targets all <p> elements that are descendants of the element with the class .container, regardless of how many elements are in between. The > (direct child selector) doesn’t work here because it only selects immediate children.

2. You want to target all <input> elements of type text (`type="text"`). Which CSS selector would you use?

A input[type="text"]

B input:text

C input[type=text]

D input:text(type="text")

The selector input[type="text"] targets all <input> elements with a type attribute equal to "text". This selector is useful to specifically target text input fields in a form.

3. You want to apply a style to all <button> elements that are currently active (when a user clicks and holds them). Which CSS selector would you use?

A button:focus

B button:active

C button:enabled

D button:checked

The selector button:active targets a button when it is active (during a click). This state is active while the button is being clicked, and it disappears once the click is released. The selector :focus applies when the element has focus, which is not the same as being clicked.

4. You want to apply a style to all <ul> elements that contain at least one <li> element with the class `.active`. Which CSS selector would you use?

A ul > li.active

B ul:has(li.active)

C ul:has(.active)

D ul li.active

The selector ul:has(li.active) targets a <ul> element that contains at least one <li> with the class .active. The :has() selector is a parent selector that selects elements having a specific descendant, but it is still under development in some browsers.

5. Imagine a page with multiple information cards in the form of <div> blocks. Some cards have a red background, others a green background. You want to apply a style only to the cards with a red background. Which CSS selector would you use?

A div[style="background-color:red"]

B div[background-color="red"]

C div:has(background-color:red)

D There is no CSS selector to target elements by their background color

The selector div[style="background-color:red"] targets <div> elements that have an inline style with a red background. However, this only works if the background is set directly in the style attribute. CSS cannot target elements based on background color if it’s applied via an external stylesheet.

6. On a page, you have several sections and you want to target all sections after the third in a list of sections. Which CSS selector would you use?

A section:nth-child(3n+1)

B section:nth-of-type(n+3)

C section:nth-child(4n)

D section:nth-of-type(4n)

The selector section:nth-of-type(n+3) selects all <section> elements that come after the first three (i.e., the 4th, 5th, etc.). This selector is very useful to target elements from a certain index without having to count them individually.

7. You want to apply a style to all <div> elements that have a child <h2>, but only if that child <h2> contains a specific text. Which CSS selector would you use?

A div:has(h2:contains("Text"))

B div h2:contains("Text")

C div:has(h2)

D div > h2:contains("Text")

The selector div:has(h2:contains("Text")) targets all <div> elements that contain a child <h2> element with the text “Text”. The :has() selector is especially powerful for this task, but it is still under development in some browsers. It allows selecting a parent based on the content of its children.

8. You want to target all <p> elements that are non-direct children of a <section> element. Which CSS selector would you use?

A section > p

B section p

C section + p

D section ~ p

The selector section p targets all <p> elements that are descendants of a <section> element, no matter how deeply nested. This is not necessarily a direct child, unlike the > selector, which only targets immediate children.

9. You have multiple buttons with the class .btn and you want to apply a style only to buttons that are currently being hovered. Which CSS selector would you use?

A .btn:hover

B .btn:focus

C .btn:active

D .btn:checked

The selector .btn:hover applies a style to buttons when the user hovers over the element with the .btn class. The :hover pseudo-class is triggered when the element is hovered.

10. You want to target all elements of a certain class but exclude the ones that are children of a specific element. Which CSS selector would you use?

A .class:not(.parent .class)

B .parent > .class

C .class:except(.parent .class)

D .class:not(.parent .class)

The selector .class:not(.parent .class) will target all elements with the class .class, excluding those that are descendants of an element with the .parent class. The :not() pseudo-class is used to exclude elements from a selection.

1. You want to target all <p> elements that are descendants of an element with the class .container. Which CSS selector would you use?

2. You want to target all <input> elements of type text (type="text"). Which CSS selector would you use?

3. You want to apply a style to all <button> elements that are currently active (when a user clicks and holds them). Which CSS selector would you use?

4. You want to apply a style to all <ul> elements that contain at least one <li> element with the class .active. Which CSS selector would you use?

5. Imagine a page with multiple information cards in the form of <div> blocks. Some cards have a red background, others a green background. You want to apply a style only to the cards with a red background. Which CSS selector would you use?

6. On a page, you have several sections and you want to target all sections after the third in a list of sections. Which CSS selector would you use?

7. You want to apply a style to all <div> elements that have a child <h2>, but only if that child <h2> contains a specific text. Which CSS selector would you use?

8. You want to target all <p> elements that are non-direct children of a <section> element. Which CSS selector would you use?

9. You have multiple buttons with the class .btn and you want to apply a style only to buttons that are currently being hovered. Which CSS selector would you use?

10. You want to target all elements of a certain class but exclude the ones that are children of a specific element. Which CSS selector would you use?

You May Also Like

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

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

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

Leave a Reply Cancel reply

1. You want to target all <p> elements that are descendants of an element with the class `.container`. Which CSS selector would you use?

2. You want to target all <input> elements of type text (`type="text"`). Which CSS selector would you use?

4. You want to apply a style to all <ul> elements that contain at least one <li> element with the class `.active`. Which CSS selector would you use?