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

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 all <p> elements that follow an <h1> or <h2> element, but not an <h3>. Which CSS selector would you use?

A h1 + p, h2 + p, :not(h3 + p)

B h1 + p, h2 + p, :not(h3 ~ p)

C h1 ~ p, h2 ~ p, :not(h3 + p)

D h1 + p, h2 + p

The selector h1 + p, h2 + p, :not(h3 ~ p) applies a style to <p> elements that immediately follow an <h1> or <h2>, but ignores those that follow an <h3>. The + targets adjacent siblings, and :not(h3 ~ p) excludes <p> elements that follow an <h3>.

2. You want to apply a style to all <a> links with a data-role attribute equal to `"admin"`. Which CSS selector would you use?

A a[data-role="admin"]

B a[data-role="admin"]:link

C a[data-role="admin"]:visited

D a[role="admin"]

The selector a[data-role="admin"] targets all <a> elements that have a data-role attribute with the value "admin". This is a powerful attribute selector for targeting elements based on specific attributes.

3. You want to style all <input> elements of type `"text"` only when they are disabled. Which CSS selector would you use?

A input[type="text"]:disabled

B input[type="text"]:not(:enabled)

C input[type="text"]:focus:disabled

D input[type="text"]:disabled:focus

The selector input[type="text"]:disabled styles all <input> elements of type "text" that are disabled. The :disabled pseudo-class is used to target disabled form elements.

4. You want to apply a style to all <p> elements that appear before the last <h2> on the page. Which CSS selector would you use?

A p:nth-child(-n+last-of-type(h2))

B p ~ h2:last-of-type

C p:not(:last-of-type) ~ h2

D p:not(h2:last-child)

The selector p ~ h2:last-of-type selects all <p> elements that come before the last <h2>. The ~ is a general sibling combinator that applies styles to all specified siblings. The :last-of-type targets the last <h2> element.

5. You want to apply a style to all <a> links that are both hovered and have been visited. Which CSS selector would you use?

A a:hover:link:visited

B a:hover:visited

C a:visited:hover

D a:visited:hover:link

The selector a:visited:hover applies a style to <a> links that are both visited and currently being hovered. The :visited pseudo-class targets visited links, and :hover targets links under the mouse pointer.

6. You want to apply a style to all <button> elements that do not have the disabled attribute. Which CSS selector would you use?

A button:not([disabled])

B button:not([disabled=true])

C button[disabled]:not()

D button[disabled=false]

The selector button:not([disabled]) applies styles to all <button> elements that do not have the disabled attribute. The :not() pseudo-class is used to exclude elements with that attribute.

7. You want to apply a style to all <ul> elements that contain exactly two <li> elements. Which CSS selector would you use?

A ul:has(li:nth-child(2))

B ul > li:nth-child(2)

C ul > li:nth-of-type(2)

D ul:has(> li:nth-child(2))

The selector ul:has(li:nth-child(2)) allows you to target a <ul> that contains exactly two <li> elements. The :has() pseudo-class selects a parent based on its children, although this is not fully supported by all browsers yet.

8. You want to apply a style to all <input> fields of type “checkbox” that are checked, but not disabled. Which CSS selector would you use?

A input[type="checkbox"]:checked:enabled

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

C input[type="checkbox"]:enabled:checked

D input[type="checkbox"]:disabled:checked

The selector input[type="checkbox"]:checked:not(:disabled) applies styles only to <input> elements of type "checkbox" that are both checked and not disabled. :checked targets checked boxes, and :not(:disabled) excludes the disabled ones.

9. You want to apply a style to all <li> elements that are in the 3rd and 5th position in a list. Which CSS selector would you use?

A li:nth-child(3), li:nth-child(5)

B li:nth-child(3n+5)

C li:nth-of-type(3), li:nth-of-type(5)

D li:nth-child(odd)

The selector li:nth-child(3), li:nth-child(5) applies a style to all <li> elements that are in the 3rd or 5th position in a list. This allows targeting multiple specific items using selectors separated by commas.

10. You want to apply a style to all <p> elements that contain the word “CSS”, regardless of case. Which CSS selector would you use?

A p:has("CSS")

B p:contains(text("CSS"))

C p:contains("CSS")

D p:has(:contains("CSS"))

Although the selector p:contains("CSS") may work with jQuery or JavaScript, it is not native to pure CSS. Standard CSS does not allow selection based on text content. This feature is only available via libraries like jQuery or other JavaScript techniques.

1. You want to apply a style to all <p> elements that follow an <h1> or <h2> element, but not an <h3>. Which CSS selector would you use?

2. You want to apply a style to all <a> links with a data-role attribute equal to "admin". Which CSS selector would you use?

3. You want to style all <input> elements of type "text" only when they are disabled. Which CSS selector would you use?

4. You want to apply a style to all <p> elements that appear before the last <h2> on the page. Which CSS selector would you use?

5. You want to apply a style to all <a> links that are both hovered and have been visited. Which CSS selector would you use?

6. You want to apply a style to all <button> elements that do not have the disabled attribute. Which CSS selector would you use?

7. You want to apply a style to all <ul> elements that contain exactly two <li> elements. Which CSS selector would you use?

8. You want to apply a style to all <input> fields of type “checkbox” that are checked, but not disabled. Which CSS selector would you use?

9. You want to apply a style to all <li> elements that are in the 3rd and 5th position in a list. Which CSS selector would you use?

10. You want to apply a style to all <p> elements that contain the word “CSS”, regardless of case. Which CSS selector would you use?

You May Also Like

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

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

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

Leave a Reply Cancel reply

2. You want to apply a style to all <a> links with a data-role attribute equal to `"admin"`. Which CSS selector would you use?

3. You want to style all <input> elements of type `"text"` only when they are disabled. Which CSS selector would you use?